盒子大小支持在IE7中

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

我现在唯一的问题是IE7似乎不支持它。有没有一个黑客得到IE7支持它？

我假设你正在使用这个来解决IE6盒子模型。不幸的是，真正没有通用的方法来欺骗早期版本的IE来支持任意的CSS属性。

我build议不要使用box-sizing属性，因为IE6以外的其他浏览器都会正确地实现box模型。维基百科的文章很好地解释了IE6的不同之处。

为了解决这个问题，我build议为IE6使用单独的样式表，并使用IE条件注释来包含它。在IE6样式表中，您可以指定不同的宽度/高度/填充/边距，以使布局看起来一致。你可以像这样只包含IE6的样式表：

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

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

正如你指出的那样：

Firefox / Opera / Safari / Chrome / IE8 +将识别允许使用边框的框大小属性。
IE6默认使用旧学校（正确的？）边框模型。
但是，IE7在标准模式下使用W3C填充框模型，并且不会识别CSS框的大小，因此无法恢复到边框模型。如果你需要支持IE7（你可能还是这样做的），那么你有四种select：

1.有条件的评论：

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

对于IE8和9使用框大小，然后对IE7进行特定的覆盖。这个选项将是痛苦的。

这个优秀的Polyfill是一个HTC文件，它修改了IE6和7中默认的浏览器行为，所以他们使用W3C盒子模型。对于光线使用来说很好，但如果广泛使用，可能会造成它自己的问题。谨慎使用和testing。

旧式的嵌套div方法仍然是一个好方法：

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

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

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

另一种方式是直接select儿童。假设你有一个固定的宽度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是最后一个浏览器不识别框大小的属性。如果你从IE7stream量很小，你可能会考虑放弃支持。你的CSS会好得多。

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

2017编辑：现在可能很久以前放弃对IE7的支持，只是使用边框。

你可以使用一个polyfill使它在一些项目上工作，但它不适用于我的input字段。

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

只要注意，行为url是相对于页面而不是css文件。使用网站根目录的相对path（用斜杠开始url，然后从那里开始）。