Question

我在我的网站项目中使用Bootstrap。我完成了设计，但项目显示在 IE ＆amp;的火狐即可。同一页面在 Chrome 上效果很好。

我在三个浏览器上使用了开发人员工具，以确保CSS属性没有区别。

使用开发者工具我然后将div的宽度调整为＆gt; 33%可以在所有浏览器上以2列格式正确呈现它。最初，div使用25%中的.col-sm-3来获取宽度bootstrap.min.css。

有人可以建议根据需要连续显示四个项目吗？每个浏览器的屏幕截图如下 -

IE Render Firefox Render Chrome Render

代码 -

HTML标记

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Project Name</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">

  </head>

  <body>

    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project Name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="#">Categories<span class="sr-only">(current)</span></a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="">Nav item</a></li>
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
            <li><a href="">More navigation</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<!--            <h3 class="page-header">Patterns <small>Please make a selection from the below options</small></h3>-->
            <ol class="breadcrumb">
              <li class="active">Patterns</li>
            </ol>            

          <div class="row placeholders">
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="images/desk_138_large.jpg" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>Pattern 1</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="images/DSF9649_large.jpg" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>Pattern 2</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="images/GersTable_0011_large.jpg" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>Pattern 3</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="images/GrandT_0004_large.jpg" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>Pattern 4</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="images/GrandT_0004_large.jpg" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>Pattern 4</h4>
              <span class="text-muted">Something else</span>              
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="images/GrandT_0004_large.jpg" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>Pattern 4</h4>
              <span class="text-muted">Something else</span>              
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="images/GrandT_0004_large.jpg" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>Pattern 4</h4>
              <span class="text-muted">Something else</span>              
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="images/GrandT_0004_large.jpg" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>Pattern 4</h4>
              <span class="text-muted">Something else</span>              
            </div>              
          </div>
        </div>
      </div>
    </div>

    <footer class="footer">
        <div class="container">
            <p class="text-muted">&copy; 2015 -  All Rights Reserved.</p>
        </div>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/core.js"></script>  
    </body>
</html>

CSS

body {
    padding-top: 50px;
}

/*
 * Global add-ons
 */

.sub-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
    display: none;
}
@media (min-width: 768px) {
    .sidebar {
        position: fixed;
        top: 51px;
        bottom: 0;
        left: 0;
        z-index: 10;
        display: block;
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
        background-color: #f5f5f5;
        border-right: 1px solid #eee;
    }
}

/* Sidebar navigation */
.nav-sidebar {
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}
.nav-sidebar > li > a {
    padding-right: 20px;
    padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
    color: #fff;
    background-color: #428bca;
}


/*
 * Main content
 */

.main {
    padding: 20px;
}
@media (min-width: 768px) {
    .main {
        padding-right: 40px;
        padding-left: 40px;
    }
}
.main .page-header {
    margin-top: 0;
}


/*
 * Placeholder dashboard ideas
 */

.placeholders {
    margin-bottom: 30px;
    text-align: center;
}
.placeholders h4 {
    margin-bottom: 0;
}
.placeholder {
    margin-bottom: 20px;
}
.placeholder img {
    display: inline-block;
    border-radius: 10%;
}

/* Footer display CSS */

.footer{
    position:fixed;
    bottom:0;
    width:100%;
    height:60px;
    background-color:rgba(245,245,245, 0.9);
    z-index: 20;
}

.container .text-muted{
    margin:20px 0
}

.footer>.container{
    padding-right:15px;
    padding-left:15px
}

它的价值 - 我在Win8.1上使用IE 11，Firefox 38.0.5，Chrome 43（64位）。任何人都可以建议一个可能的解决方案吗？

编辑：添加<div class="clearfix"></div>解决了问题。我在第一行的四个项目之后添加了它。

Answer 1

按照here说明添加clearfix div有助于解决显示问题。

我的方案中适用的修正是在第一行的四个项目之后添加<div class="clearfix"></div>

IE和IE上的显示不一致火狐

1 个答案: