在 IE 和 Firefox 上显示不一致答案

【问题标题】：Inconsistent display on IE & Firefox在 IE 和 Firefox 上显示不一致
【发布时间】：2015-06-23 15:01:38
【问题描述】：

我在我的网站项目中使用Bootstrap。我完成了设计，但这些项目在 IE 和 Firefox 上显示不合适。同一页面在 Chrome 上呈现出色。

我在三个浏览器上使用了开发者工具来确保 CSS 属性没有差异。

然后我使用开发人员工具将 div 的宽度调整为 > 33% 以查看它在所有浏览器上以 2 列格式正确呈现。最初，div 使用来自bootstrap.min.css 的.col-sm-3 派生宽度25%。

任何人都可以根据需要建议任何解决方法来连续显示四个项目吗？每个浏览器的屏幕截图如下 -

还有代码 -

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> 解决了这个问题。我在第一行的四项之后添加了它。

【问题讨论】：

我不确定这是否有必要，但您可以考虑使用某种reset css。它可能会解决您的跨浏览器问题
尝试使用最新的引导 css，我在 Firefox 和 IE 中测试过，效果很好。 jsfiddle.net/k1k0tzmw
我现在实际上正在使用 Bootstrap v3.3.4。我将尝试使用 Bootstrap 中的 v3.3.5
好吧，我将 Bootstrap css 和 js 的链接切换到 Bootstrap CDN 链接，但没有运气。与 IE 和 Firefox 不同，Chrome 仍能正确显示
尝试按照getbootstrap.com/css/#grid-responsive-resets中的说明添加clearfix div

标签： html css internet-explorer firefox twitter-bootstrap-3

【解决方案1】：

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

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

【讨论】：