css - Internet Explorer 7 中的引导网格

Question

在我的 Bootstrap 3、3 列布局中使用 IE7 不正确地包装列而苦苦挣扎。

我的网格系统在包括 IE8 在内的所有其他浏览器中以我想要的方式工作（在反映较小设备的分辨率下堆叠）。我想弄清楚我从 IE8 到 IE7 失去了什么支持，导致它无法在 IE7 中正确换行.

< col-md-3 >< col-md-3 >< col-md-3 >

显示为：

< col-md-3 >< col-md-3 ><br />
< col-md-3 >

解决方案

Boostrap 3 在每个列元素上使用 padding-left/padding-right，同时还使用 <style = "width:100%;"> 来实现一致的结构。

IE7 没有正确渲染这个填充空间，而是像其他浏览器一样渲染它。即如果父容器的宽度为 960px，则子容器的宽度加上添加的边距必须小于 960。本质上是 (960/3)!=((320+margins)*3)。

为了克服这个问题，我将每一列包装在一个固定宽度的容器中。

score 0 · Accepted Answer

就像 Aibrean 提到的，最好的解决方案可能是为 IE7 创建一个单独的样式表。尝试使用条件注释：

<!--[if IE 7]>
 <link rel='stylesheet' type='text/css' href='/path/to/ie7styles.css' />
<![endif]-->

score 0 · Accepted Answer

IE8 及以下不支持 Bootstrap 样式表中使用的某些选择器。这方面最突出的例子之一是 nth-child 伪选择器，它在 Bootstrap 中广泛使用，并且不受 IE8 及以下版本的支持。

以下与您的问题没有明确相关，但也许您可以联系：

最近我遇到了一个问题，我在 jQuery 循环中生成了一系列 li.span4。在 Bootstrap 中，有一条规则可以从第 4 个元素中删除左边距，但该规则被定义为 nth-child(4)，因此与 IE8- 无关

为了克服这个问题，我刚刚找到了 IE8 无法识别的规则，并用另一个规则对其进行了补充，在没有伪选择器的情况下定义了完全相同的东西，所以在哪里

[class*="span"]:nth-child(4)

存在，我补充说：

.row-fluid > .span4:first-child + .span4 + .span4 + .span4

达到同样的目的。IE8 支持第一个孩子，IE7 不确定。

2 回答 2