IE7中的盒子大小支持

Question

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

我现在唯一的问题是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:

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.

Answer 2

您可以使用polyfill使其适用于某些项目,但它不适用于我的输入字段.

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

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

请注意,行为url是相对于页面而不是css文件.使用站点根目录的相对路径(使用斜杠启动URL,然后从那里开始).

Answer 3

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

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

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

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