html - 在 IE 和 Firefox 上显示不一致

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

我正在使用 Bootstrap在我的网站元素上。我完成了设计，但元素在 IE 和 Firefox 上显示不正确。同一页面在 Chrome 上呈现效果很好。

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

然后我使用开发人员工具将 div 的宽度调整为 > 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>解决了这个问题。我在第一行的四个元素之后添加了它。

最佳答案

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

适用于我的场景的修复是添加 <div class="clearfix"></div>第一行四项之后

关于html - 在 IE 和 Firefox 上显示不一致，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30914385/

上一篇：javascript - 具有相同网址的多个“赞”按钮

下一篇：HTML/CSS 元素彼此放置 - 需要可滚动

相关文章：

javascript - .slideDown 对我不起作用

php - 表单中的选项值以在数据库中搜索两个值

css - 使用 CSS 和 HTML 为不同的段落设置不同的样式

jquery - 将表 td 分成 6 行或更少行的解决方案

google-chrome - TFS 2013 Web 访问 - 无法注销

javascript - 是否可以更新 iframe 内的 angularjs 表达式？

javascript - 单击链接(在移动屏幕上)后，如何关闭菜单？

css - 表格宽度错误

html - IE 7/8/9 中#main div 背景下的下拉菜单

javascript - 不包含 li 的空白 Ul 在 IE 中显示填充和边距

©2024 IT工具网  联系我们