Question

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

我现在唯一的问题是IE7似乎不支持它。有没有让IE7支持它的黑客攻击？

Answer 1

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

正如你所说：

Firefox / Opera / Safari / Chrome / IE8 +将识别盒子大小调整属性，允许您使用边框。
默认情况下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：

这个优秀的Polyfill是一个HTC文件，它修改了IE6和7中的默认浏览器行为，因此他们使用W3C盒子模型。它适用于轻度使用，但如果广泛使用，可能会导致问题。谨慎使用和测试。

旧式嵌套div方法仍然很好：

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

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

旧格言永远不要在固定宽度元素上使用填充仍然适用。

另一种方法是使用直接子选择器。假设你有一个包含一些内容的固定宽度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填充的外观，但不会触发盒子模型错误。

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

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

2017编辑：现在可能已经很久没有放弃对IE7的支持了，只使用边框。

Answer 2

您可以使用polyfill使其适用于某些项目，但它对我的输入字段不起作用。

box-sizing: border-box;
*behavior: url(/css/boxsizing.htc);

请注意，行为网址是相对于网页而不是css文件。使用站点根目录的相对路径（使用斜杠启动URL，然后从那里开始）。

Answer 3

我假设你正在使用它来绕过IE6盒子模型。不幸的是，实际上没有通用的方法来欺骗早期版本的IE以支持任意CSS属性。

我建议不要使用box-sizing属性，因为IE6以外的每个浏览器都会正确实现盒子模型。 Wikipedia article很好地解释了IE6的不同之处。

要解决此问题，我建议为IE6使用单独的样式表，并使用IE conditional comments包含它。在IE6样式表中，您可以指定不同的宽度/高度/填充/边距，以使您的布局看起来一致。您可以像这样包含IE6的样式表：

<!--[if IE 6]>
  <link href="ie6sucks.css" rel="stylesheet" type="text/css" />
<![endif]-->