IE7中的盒尺寸支持

我假设你用这个来绕过IE6盒子模型。不幸的是,没有一种通用的方法可以欺骗早期版本的IE来支持任意CSS属性。

box-sizing 属性,因为除IE6之外的所有浏览器都将正确实现box模型。这个 Wikipedia article 很好地解释了IE6的不同之处。

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

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

正如你所指出的:

• 但是,IE7在标准模式下使用W3C填充框模型,并且不会识别CSS框大小属性,因此无法恢复到边框框模型。如果您需要支持IE7(而且您可能仍然需要),那么您只能选择以下四个选项之一:

1.条件评论:

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

对IE8和IE9使用框大小调整,然后对IE7进行特定覆盖。这个选择将是痛苦的。

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

这个优秀的Polyfill是一个HTC文件,它修改了IE6和ie7中的默认浏览器行为,因此它们使用W3C-box模型。它的罚款轻使用,但可能会造成问题,它自己如果广泛使用。小心使用和测试。

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

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

古老的格言

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

<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添加边距,从而在content div上出现20px的填充,但不会触发box模型错误。

5.考虑放弃IE7支持

IE7是最后一个不识别框大小属性的浏览器。如果IE7的流量很小,你 考虑放弃支持。你的CSS会更好。

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

你可以使用polyfill使它在某些项目上工作,但它不适用于我的输入字段。

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

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