Internet Explorer 7 中的引导网格答案

【问题标题】：bootstrap grids in internet explorer 7Internet Explorer 7 中的引导网格
【发布时间】：2014-08-10 13:35:06
【问题描述】：

在我的 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，同时还使用

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

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

【问题讨论】：

您将很难找到对 IE7 的支持，大多数网站不再支持这个非常旧的浏览器。为什么一定要支持？
该网站的客户相信技术会经久不衰，因此他们喜欢传统支持
是时候找一个新客户了
微软甚至不支持 IE7。他们将支持的最新版本是 IE9。您可以拥有一个用于 IE7 加载的样式表，该样式表将隐藏换行符。不是最好的方法，但这肯定不是最好的浏览器。此外，theie7countdown.com - 世界上只有不到 1% 的人使用它......也许您的客户没有意识到使用 IE7 的人可能仍然在世界的偏远地区，他们永远不会使用他们的服务/产品，如果他们会，他们已经习惯了互联网上看起来像垃圾的一切。

【解决方案1】：

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

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

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

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

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

存在，我补充：

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

达到同样的目的。 IE8 支持 First-child，IE7 不确定。

【讨论】：

【解决方案2】：

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

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

【讨论】：

如果我必须更改 CSS 的多个方面，或者如果 twitter-bootstrap-3 提供的 css 不是为了安抚而编辑的文档那么长，那么这是一个很好的解决方案不到 1% 的人口（正如 Aibrean 和 Dan 指出的那样）。感谢您的提醒