列是 IE 8 中的全宽 - Css bootstrap
Posted
技术标签:
【中文标题】列是 IE 8 中的全宽 - Css bootstrap【英文标题】：column are full width in IE 8 - Css bootstrap 【发布时间】：2014-01-15 03:10:39 【问题描述】：我在我的网页中使用 bootstrap 3.0.3 并添加 html5shiv 库并响应库来修复它，但它不适用于 Internet Explorer 8。
我的html代码：
<div class="container">
<div class="row">
<div class="col-sm-4" style="background:red;"> </div>
<div class="col-sm-4" style="background:green;"> </div>
<div class="col-sm-4" style="background:blue;"> </div>
</div>
</div>
它在 FF 和 Webkits 浏览器中运行良好，但导致 IE：
现在演示是here，我该如何解决？
【问题讨论】：
我也可以复制您的问题。 jsfiddle.net/ravimallya/LaN3d/4 全屏：fiddle.jshell.net/ravimallya/LaN3d/4/show。你犯了一个错误。您在行内有嵌套容器，反之亦然。我还更正了 respond.js 路径。 @Ravimalya 不，它不是重复的，您的固定样本不适用于 IE-8。 【参考方案1】：根据线程中的解决方案：Must Bootstrap container elements include row elements?，您的标记应该是：
<div class="container">
<div class="row">
<div class="col-sm-4" style="background:red;"> </div>
<div class="col-sm-4" style="background:green;"> </div>
<div class="col-sm-4" style="background:blue;"> </div>
</div>
</div>
并使用这个 CSS 在 IE8 中实现它：
.container
display:table;
width: 100%;
.row
height: 100%;
display: table-row;
.col-sm-4
display: table-cell;
这是工作的 demo
.row 类在 .container 中不是必需的，但如果包含 then，container> 行是顺序而不是行 > 容器（您编码的)！
编辑
值得注意的是respond.js 仅适用于本地文件。因此，如果您在 IE8 上为您的网站从 CDN 获取了引导程序的 css 文件，它将无法正常工作，请尝试使用 bootstrap.css 的本地副本
Internet Explorer 8 和 Respond.js
在您的程序中使用 Respond.js 时请注意以下注意事项 Internet Explorer 8 的开发和生产环境。
Respond.js 和跨域 CSS 将 Respond.js 与托管在不同（子）域上的 CSS 一起使用（对于 例如，在 CDN 上）需要一些额外的设置。请参阅 Respond.js 有关详细信息的文档。
Respond.js 和 file:// 由于浏览器安全规则，Respond.js 不适用于页面 通过 file:// 协议查看（例如打开本地 HTML 文件时）。 要测试 IE8 中的响应功能，请通过 HTTP(S) 查看您的页面。看 详情请参阅 Respond.js 文档。
Respond.js 和@import Respond.js 不适用于通过 @import 引用的 CSS。在 特别是，已知某些 Drupal 配置使用 @import。看 详情请参阅 Respond.js 文档。
IE 兼容模式 旧 Internet Explorer 兼容性不支持 Bootstrap 模式。为确保您使用的是最新的 IE 渲染模式， 考虑在您的网页中包含适当的标签：
来源：Getbootstrap
【讨论】：
【参考方案2】：如果不需要“响应性”，您可以使用 col-xs-* 类来代替为 respond.js 设置代理。它有效，因为 col-xs-* 类与媒体无关。它解决了我的问题。
【讨论】：
使用 col-xs-* 为我解决了这个问题。谢谢。【参考方案3】：最好以仅适用于 IE 而不适用于任何其他浏览器的方式应用此功能，因为它可能会破坏您的某些响应式网站。这个页面专门讲述了如何应用 IE only CSS。
Apply CSS rules if browser is IE
【讨论】：
【参考方案4】：您还需要记住 bootstrap.css 在 head 部分中的 respond.js 之上：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mobile viewport optimisation -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap example</title>
<noscript>
<link rel="stylesheet" href="../assets/css/noscript.css" />
</noscript>
<!-- Bootstrap -->
<link href="../assets/bootstrap-3.3.5/dist/css/bootstrap.css" rel="stylesheet">
<!--[if lte IE 8]>
<script src="../assets/js/ie/es5-shim.min.js"></script>
<script src="../assets/js/ie/es5-sham.min.js"></script>
<script src="../assets/js/ie/html5shiv.js"></script>
<script src="../assets/js/ie/respond.min.js"></script>
<![endif]-->
</head>
【讨论】：
以上是关于列是 IE 8 中的全宽 - Css bootstrap的主要内容，如果未能解决你的问题，请参考以下文章
使用 Twitter BootStrap Css Toolkit 没有侧边栏时的全宽内容