CSS IE7 中的 box-sizing 支持
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2909667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
box-sizing support in IE7
提问by lowellk
I just discovered the box-sizing: border-boxCSS property which solves a bunch of cross browser layout problems for me.
我刚刚发现了box-sizing: border-boxCSS 属性，它为我解决了一堆跨浏览器布局问题。
The only issue I now have is that IE7 doesn't seem to support it. Is there a hack to get IE7 to support it?
我现在唯一的问题是 IE7 似乎不支持它。有没有黑客让 IE7 支持它？
采纳答案by wsanville
I'm assuming you're using this to get around the IE6 box model. Unfortunately, there really is no general way to trick earlier versions of IE into supporting arbitrary CSS properties.
我假设您正在使用它来绕过 IE6 框模型。不幸的是，确实没有通用的方法可以欺骗早期版本的 IE 支持任意 CSS 属性。
I would recommend not using the box-sizingproperty, because every browser other than IE6 will implement the box model correctly. The Wikipedia articledoes a good job of explaining how IE6 differs.
我建议不要使用该box-sizing属性，因为除 IE6 之外的每个浏览器都会正确实现框模型。在维基百科的文章做了解释如何IE6不同的一个好工作。
To solve this, I recommend using a separate style sheet for IE6, and including it using IE conditional comments. In your IE6 style sheet, you can specify different widths/heights/padding/margins to make your layout look consistent. You can include a style sheet for IE6 only like this:
为了解决这个问题，我建议为 IE6 使用单独的样式表，并使用IE 条件注释包含它。在您的 IE6 样式表中，您可以指定不同的宽度/高度/填充/边距，以使您的布局看起来一致。您只能像这样包含 IE6 的样式表：
<!--[if IE 6]>
<link href="ie6sucks.css" rel="stylesheet" type="text/css" />
<![endif]-->
回答by superluminary
There are several ways to do this, none perfect.
有几种方法可以做到这一点，没有一个是完美的。
As you point out:
正如你所指出的：
- Firefox / Opera / Safari / Chrome / IE8+ will recognise the box-sizing property allowing you to use border-boxes.
- IE6 will use the old school (correct?) border-box model by default.
- However IE7 uses the W3C padding box model when in standards mode, and will not recognise the CSS box-sizing property so there's no way to revert to the border box model. If you need to support IE7 (and you probably still do), you're stuck with one of four options:
- Firefox / Opera / Safari / Chrome / IE8+ 将识别 box-sizing 属性，允许您使用边框框。
- 默认情况下，IE6 将使用旧学校（正确？）边框模型。
- 然而，IE7 在标准模式下使用 W3C 填充框模型，并且不会识别 CSS box-sizing 属性，因此无法恢复到边框框模型。如果您需要支持 IE7（而且您可能仍然这样做），您只能选择以下四个选项之一：
1. Conditional Comments:
1. 有条件的评论：
<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->
Use box-sizing for IE8 and 9, then make specific overrides for IE7. This option will be painful.
对 IE8 和 9 使用 box-sizing，然后对 IE7 进行特定覆盖。这个选择会很痛苦。
2. The Schepp Box Sizing Polyfill:
2. Schepp Box Sizing Polyfill：
https://github.com/Schepp/box-sizing-polyfill
https://github.com/Schepp/box-sizing-polyfill
This excellent Polyfill is an HTC file which modifies the default browser behavior in IE6 and 7 so they use the W3C box model. It's fine for light use, but may cause problems of it's own if used extensively. Use with caution and TEST.
这个优秀的 Polyfill 是一个 HTC 文件，它修改了 IE6 和 7 中的默认浏览器行为，因此它们使用 W3C 框模型。它适合轻度使用，但如果广泛使用可能会导致其自身的问题。谨慎使用和测试。
3. Old Style Nested Divs:
3. 旧式嵌套 Div：
The old style nested div approach is still a fine way:
旧样式的嵌套 div 方法仍然是一个很好的方法：
<div style="width:100px; border:1px solid black">
<div style="margin:10px">
Content
</div>
</div>
A non-semantic nested div provides the padding indirectly, with the disadvantage that your markup becomes untidy. Obviously don't use inline styles, I'm using them here for the sake of illustration.
非语义嵌套 div 间接提供填充，缺点是您的标记变得不整洁。显然不要使用内联样式，我在这里使用它们是为了说明。
The old adage Never use padding on a fixed width elementstill stands true.
永远不要在固定宽度的元素上使用填充的古老格言仍然适用。
4. My Preferred Solution - A Direct Child Selector:
4. 我的首选解决方案 - 直接子选择器：
The other way round this is with the direct child selector. Say you have a fixed width div containing some content:
另一种方法是使用直接子选择器。假设你有一个固定宽度的 div 包含一些内容：
<div class="content">
<h1>Hi</h1>
<p>hello <em>there</em></p>
</div>
You can then write a rule to add left and right margins to all the direct children of the div:
然后，您可以编写一个规则，为 div 的所有直接子级添加左右边距：
.content {
width:500px;
padding:20px 0;
}
.content > * {
margin:0 20px;
}
This will add a little margin to the h1 and p, but not to the nested em, giving the appearance of 20px padding on the content div, but without triggering the box model bug.
这将为 h1 和 p 添加一点边距，但不会为嵌套的 em 添加一点边距，从而在内容 div 上提供 20px 填充的外观，但不会触发框模型错误。
5. Consider Dropping IE7 support
5. 考虑放弃 IE7 支持
IE7 is the last browser not to recognise the box-sizing property. If you're getting little traffic from IE7, you mightconsider dropping support. Your CSS will be much nicer.
IE7 是最后一个不识别 box-sizing 属性的浏览器。如果您从 IE7 获得的流量很少，您可能会考虑放弃支持。你的 CSS 会更好。
As of late 2013, this is my preferred option.
截至 2013 年底，这是我的首选。
2017 EDIT: It's probably long past time to drop support for IE7 now, and just use border-box.
2017 编辑：现在放弃对 IE7 的支持可能已经很久了，只使用边框框。
回答by neojp
You can use a polyfill to make it work on some items, it didn't work for my input fields though.
您可以使用 polyfill 使其适用于某些项目，但它不适用于我的输入字段。
https://github.com/Schepp/box-sizing-polyfill
https://github.com/Schepp/box-sizing-polyfill
box-sizing: border-box;
*behavior: url(/css/boxsizing.htc);
Just note that the behavior url is relative to the page and not the css file. Use relative paths to site's root (start the url with an slash and then go from there).
请注意，行为 url 是相对于页面而不是 css 文件的。使用站点根目录的相对路径（以斜杠开头 url，然后从那里开始）。
