我的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:
解决方法
<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工作
.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