css - 列在 IE 8 中为全宽 - Css bootstrap

Question

我在我的网页中使用 bootstrap 3.0.3 并添加 html5shiv 库和响应库来修复它，但它在 Internet Explorer 8 上不起作用。

我的 html 代码:

<div class="container">
    <div class="row">
        <div class="col-sm-4" style="background:red;">&nbsp;</div>
        <div class="col-sm-4" style="background:green;">&nbsp;</div>
        <div class="col-sm-4" style="background:blue;">&nbsp;</div>
    </div>
</div>

它在 FF 和 Webkits 浏览器中运行良好，但在 IE 中运行良好:

现在演示是here ，我该如何解决？

Answer 1

基于线程中的解决方案:Must Bootstrap container elements include row elements? ，您的标记应该是:

<div class="container">
    <div class="row">
        <div class="col-sm-4" style="background:red;">&nbsp;</div>
        <div class="col-sm-4" style="background:green;">&nbsp;</div>
        <div class="col-sm-4" style="background:blue;">&nbsp;</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 中不是必须的，但是如果你包含的话，container > row 是顺序而不是 row > container(您编写的代码)!

编辑

可能值得注意的是 respond.js仅适用于本地文件。因此，如果您从 CDN 为您的网站在 IE8 上获取了 Bootstrap 的 css 文件，它将无法正常工作，而是尝试使用 bootstrap.css 的本地副本p>

Internet Explorer 8 and Respond.js

Beware of the following caveats when using Respond.js in yourdevelopment and production environments for Internet Explorer 8.

Respond.js and cross-domain CSSUsing Respond.js with CSS hosted on a different (sub)domain (forexample, on a CDN) requires some additional setup. See the Respond.jsdocs for details.

Respond.js and file://Due to browser security rules, Respond.js doesn't work with pagesviewed via the file:// protocol (like when opening a local HTML file).To test responsive features in IE8, view your pages over HTTP(S). Seethe Respond.js docs for details.

Respond.js and @importRespond.js doesn't work with CSS that's referenced via @import. Inparticular, some Drupal configurations are known to use @import. Seethe Respond.js docs for details.

IE Compatibility modesBootstrap is not supported in the old Internet Explorer compatibilitymodes. To be sure you're using the latest rendering mode for IE,consider including the appropriate tag in your pages:

来源:Getbootstrap