列是IE 8 – Css引导中的全宽

前端之家收集整理的这篇文章主要介绍了列是IE 8 – Css引导中的全宽前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在我的网页中使用bootstrap 3.0.3,并添加html5shiv lib和响应lib来修复它,但它不能在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,我该怎么解决

解决方法

根据线程中的解决方案: Twitter Bootstrap: must .container contain .row?,您的标记应为:
<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工作

.container中不需要.row类,但如果包含,则容器>行是顺序不是行>容器(你代码)!

编辑

值得注意的是,respond.js仅适用于本地文件。因此,如果您有IE8的网站的CDN引导的css文件,它将不起作用,而是尝试使用本地的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 CSS
Using 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 @import
Respond.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 modes
Bootstrap 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:

资料来源:Getbootstrap

猜你在找的CSS相关文章