css - IE7 中的 box-sizing 支持

Question

我刚刚发现了 box-sizing: border-box CSS 属性，它为我解决了一大堆跨浏览器布局问题。

我现在遇到的唯一问题是 IE7 似乎不支持它。是否有让 IE7 支持它的 hack？

Answer 1

有几种方法可以做到这一点，没有一种是完美的。

正如您指出的:

• Firefox/Opera/Safari/Chrome/IE8+ 将识别 box-sizing 属性，允许您使用边框。
• 默认情况下，IE6 将使用旧式(正确的？)边框模型。
• 但是，IE7 在标准模式下使用 W3C 填充框模型，并且无法识别 CSS box-sizing 属性，因此无法恢复为边框模型。如果您需要支持 IE7(您可能仍然这样做)，您只能选择以下四种选择之一:

1。条件注释:

<!--[if IE 7]>
  Special instructions for IE 7 here
<![endif]-->

对 IE8 和 9 使用 box-sizing，然后对 IE7 进行特定覆盖。这个选项会很痛苦。

2。 Schepp Box Sizing Polyfill:

https://github.com/Schepp/box-sizing-polyfill

这个优秀的 Polyfill 是一个 HTC 文件，它修改了 IE6 和 7 中的默认浏览器行为，因此它们使用 W3C 盒子模型。轻度使用没问题，但如果大量使用，可能会导致其自身出现问题。谨慎使用并进行测试。

3。旧式嵌套 Div:

老式的嵌套 div 方法仍然是一个很好的方法:

<div style="width:100px; border:1px solid black">
  <div style="margin:10px">
    Content
  </div>
</div>

非语义嵌套 div 间接提供填充，缺点是您的标记变得不整洁。显然不要使用内联样式，我在这里使用它们是为了说明。

古老的格言永远不要在固定宽度的元素上使用填充仍然是正确的。

4。我的首选解决方案 - 直接子选择器:

相反的方法是使用直接子选择器。假设您有一个包含一些内容的固定宽度的 div:

<div class="content">
  <h1>Hi</h1>
  <p>hello <em>there</em></p>
</div>

然后您可以编写一个规则，为 div 的所有直接子级添加左右边距:

.content {
  width:500px;
  padding:20px 0;
}
.content > * {
  margin:0 20px;
}

这将为 h1 和 p 添加一点边距，但不会为嵌套的 em 添加一点边距，从而在内容 div 上提供 20px 的填充外观，但不会触发框模型错误。

5。考虑放弃对 IE7 的支持

IE7 是最后一个不识别 box-sizing 属性的浏览器。如果您从 IE7 获得的流量很少，您可能会考虑放弃支持。您的 CSS 会更好。

截至 2013 年底，这是我的首选。

---

2017 年编辑:现在放弃对 IE7 的支持可能已经过去很久了，只使用 border-box。