twitter-bootstrap IE 8 中的列是全宽的 - Css bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20802163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
column are full width in IE 8 - Css bootstrap
提问by A1Gard
I use bootstrap 3.0.3 in my web page and add html5shiv lib and respond lib for fix it this but it is not worked on internet explorer 8.
我在我的网页中使用 bootstrap 3.0.3 并添加 html5shiv lib 并响应 lib 来修复它，但它不适用于 Internet Explorer 8。
my html code:
我的 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>
Its worked good in FF and Webkits browsers but result in IE :
它在 FF 和 Webkits 浏览器中运行良好，但导致 IE ：
Now demo is here, how can I fix it?
现在演示在这里，我该如何解决？
回答by NoobEditor
Based on the solution in the thread : Must Bootstrap container elements include row elements?, your markup should be :
基于线程中的解决方案：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>
and use this CSS to achieve it in IE8:
并使用此 CSS 在 IE8 中实现它：
.container
{
display:table;
width: 100%;
}
.row
{
height: 100%;
display: table-row;
}
.col-sm-4
{
display: table-cell;
}
here is the working demo
这是工作演示
The .rowclass is not required inside a .container, but if you include then, container > row is the order not row > container(which you code)!
本.row类不需要里面.container，但是如果包括的话，容器>行是为了不排>容器（你代码）！
EDIT
编辑
It might be worth noting that respond.jsonly works for local files. So if you have got cssfiles of bootstrap from CDN for your website on IE8, it won't work, instead, try with a local copy of bootstrap.css
可能值得注意的是，它respond.js仅适用于本地文件。因此，如果您css在 IE8 上为您的网站从 CDN获得了引导程序文件，它将不起作用，而是尝试使用本地副本bootstrap.css
Internet Explorer 8 and Respond.js
Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.
Respond.js and cross-domain CSSUsing Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.
Respond.js and file://Due to browser security rules, Respond.js doesn't work with pages viewed via the file:// protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). See the Respond.js docs for details.
Respond.js and @importRespond.js doesn't work with CSS that's referenced via @import. In particular, some Drupal configurations are known to use @import. See the Respond.js docs for details.
IE Compatibility modesBootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate tag in your pages:
Internet Explorer 8 和 Respond.js
在 Internet Explorer 8 的开发和生产环境中使用 Respond.js 时，请注意以下注意事项。
Respond.js 和跨域 CSS使用 Respond.js 和托管在不同（子）域（例如，CDN）上的 CSS 需要一些额外的设置。有关详细信息，请参阅 Respond.js 文档。
Respond.js 和 file://由于浏览器安全规则，Respond.js 不适用于通过 file:// 协议查看的页面（例如打开本地 HTML 文件时）。要在 IE8 中测试响应式功能，请通过 HTTP(S) 查看您的页面。有关详细信息，请参阅 Respond.js 文档。
Respond.js 和@importRespond.js 不适用于通过@import 引用的CSS。特别是，已知某些 Drupal 配置使用 @import。有关详细信息，请参阅 Respond.js 文档。
IE 兼容模式旧的 Internet Explorer 兼容模式不支持 Bootstrap。为确保您使用的是最新的 IE 渲染模式，请考虑在您的页面中包含适当的标记：
Source : Getbootstrap
来源：Getbootstrap
回答by ideafixxxer
If "responsiveness" is not required, you can use col-xs-* classes instead of setting up proxy for respond.js. It works, because col-xs-* classes are media-agnostic. It solved the issue in my case.
如果不需要“响应性”，您可以使用 col-xs-* 类而不是为 response.js 设置代理。它有效，因为 col-xs-* 类是媒体不可知的。它解决了我的问题。
回答by Den
Addition you need remember that bootstrap.css is above respond.js in your head section:
另外你需要记住 bootstrap.css 在你的 head 部分高于 response.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>
回答by Dusten Lee Harward
It might be better to apply this in a way that would only apply to IE and not any other browsers as it can break some of your responsive web sites. This page speaks specifically to how to apply IE only CSS.
以仅适用于 IE 而不适用于任何其他浏览器的方式应用它可能会更好，因为它可能会破坏您的某些响应式网站。此页面专门介绍如何仅应用 IE 的 CSS。
