列是全宽在IE 8 - Css引导 [英] column are full width in IE 8 - Css bootstrap

问题描述

我在我的网页中使用bootstrap 3.0.3，并添加html5shiv lib和响应lib修复它，但它不工作在互联网浏览器8。

我的html代码：

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

它在FF和Webkits浏览器中工作良好，但导致IE：

>

现在的演示是这里，我该如何解决？

解决方案

基于线程中的解决方案： Twitter Bootstrap：必须.container包含.row？，您的标记应为：

  ; div class =container> 
< div class =row> 
< div class =col-sm-4style =background：red;>& nbsp;< / div> 
< div class =col-sm-4style =background：green;>& nbsp;< / div> 
< div class =col-sm-4style =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; 
} 
  

这里是工作 演示

.row 在 .container 中不需要类，但如果您包含，则 container> row是顺序not row> container 你代码）！

EDIT

可能值得注意的是， respond.js 仅适用于本地文件。因此，如果您在IE8上有从您的网站CDN引导的 css 文件，它将无法工作，而是尝试使用本地副本 bootstrap.css

Internet Explorer 8和Respond.js

在您的
开发和生产环境中为Internet Explorer 8使用Respond.js时，请注意以下注意事项。

Respond.js和跨域CSS
在不同的（子）域上使用Respond.js（对于
示例，在CDN上）需要一些额外的设置。有关详细信息，请参阅Respond.js
docs。

Respond.js和file：//
由于浏览器安全规则，Respond.js不能使用页面
通过文件：//协议（像打开本地HTML文件时）。
要测试IE8中的响应功能，请通过HTTP（S）查看您的页面。有关详细信息，请参阅
Respond.js文档。

Respond.js和@import
Respond.js不适用于通过@import引用的CSS。在
特别的，一些Drupal配置已知使用@import。有关详细信息，请参阅
Respond.js文档。

IE兼容性模式
在旧版Internet Explorer兼容性
模式下不支持Bootstrap。为确保您使用的是IE的最新渲染模式，
考虑在您的网页中加入适当的标记：

资料来源： Getbootstrap

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.

my html code:

<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>

Its worked good in FF and Webkits browsers but result in IE :

Now demo is here, how can I fix it?

解决方案

Based on the solution in the thread : Twitter Bootstrap: must .container contain .row?, your markup should be :

<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>

and use this CSS to achieve it in IE8:

.container
{
    display:table;
    width: 100%;
}

.row
{
    height: 100%;
    display: table-row;
}
.col-sm-4
{
    display: table-cell;
}

here is the working demo

The .row class is not required inside a .container, but if you include then, container > row is the order not row > container (which you code)!

EDIT

It might be worth noting that respond.js only works for local files. So if you have got css files of bootstrap from CDN for your website on IE8, it won't work, instead, try with a local copy of 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:

Source : Getbootstrap

这篇关于列是全宽在IE 8 - Css引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！