Html 为什么 box-sizing 在 table 和 div 上的作用不同？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19068909/
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
Why is box-sizing acting different on table vs div?
提问by Rob N
Here's the HTML: http://jsfiddle.net/jC8DL/1/
这是 HTML：http: //jsfiddle.net/jC8DL/1/
<div style='width:300px;border:1px solid green'>
<div>Outer div</div>
<div style='width:100%;border:1px solid red;margin:10px;'>
Inner div, 10px margin.
</div>
<div style='width:100%;border:1px solid red;padding:10px;'>
Inner div, 10px padding.
</div>
<div style='width:100%;border:1px solid red;padding:10px;box-sizing:border-box'>
Same, with box-sizing: border-box
</div>
<table style='width:100%;border:1px solid red;padding:10px;'>
<tr><td>Inner table, 10px padding</td></tr>
</table>
</div>
And it looks like this in my Chrome:
它在我的 Chrome 中看起来像这样：
I think I understand everything until the last one. My Chrome inspector shows the table's computed box-sizingstyle is content-boxso I expect it to behave like the second div, and overflow and look ugly. Why is it different? Is this documented somewhere in the HTML/CSS spec?
我想我明白一切，直到最后一个。我的 Chrome 检查器显示表格的计算box-sizing样式，content-box所以我希望它表现得像第二个 div，并且溢出并且看起来很难看。为什么不一样？这是否记录在 HTML/CSS 规范中的某处？
回答by BoltClock
Yes, CSS2.1 states the following for tables with the separated borders model:
是的，CSS2.1 对具有分隔边框模型的表格声明如下：
However, in HTML and XHTML1, the width of the <table> element is the distance from the left border edge to the right border edge.
Note:In CSS3 this peculiar requirement will be defined in terms of UA style sheet rules and the 'box-sizing' property.
但是，在 HTML 和 XHTML1 中，<table> 元素的宽度是从左边框边缘到右边框边缘的距离。
注意：在 CSS3 中，这个特殊的要求将根据 UA 样式表规则和“box-sizing”属性来定义。
The current CSS3 definition of box-sizingdoes not say anything about this, but translating the above quote it basically means in (X)HTML, tables use the border-box model: padding and borders do not add to the specified width of a table.
当前的 CSS3 定义box-sizing对此没有任何说明，但翻译上面的引用它基本上意味着在 (X)HTML 中，表格使用边框框模型：填充和边框不会添加到表格的指定宽度。
Note that in terms of the box-sizingproperty, different browsers seem to handle this special case differently:
请注意，就box-sizing属性而言，不同的浏览器似乎对这种特殊情况的处理方式不同：
Chrome
box-sizingis set to the initial value,content-box; changing it has no effect whatsoever. Neither does redeclaringbox-sizing: content-boxwithin the inline styles, but that should be expected. Either way, Chrome appears to be forcing the table to always use the border-box model.IE
box-sizingis set toborder-box; changing it tocontent-boxcauses it to behave like the seconddiv.Firefox
-moz-box-sizingis set toborder-box; changing it tocontent-boxorpadding-boxcauses it to resize accordingly.
Chrome
box-sizing设置为初始值，content-box; 改变它没有任何影响。box-sizing: content-box在内联样式中重新声明也不行，但这应该是意料之中的。无论哪种方式，Chrome 似乎都在强制表格始终使用边框模型。IE
box-sizing设置为border-box; 将其更改为content-box使其表现得像第二个div.Firefox
-moz-box-sizing设置为border-box; 将其更改为content-box或padding-box使其相应地调整大小。
Since CSS3 does not yet make any mention of table box sizing, this should not come as a surprise. At the very least, the result is the same — it's only the underlying implementation that's different. But given what the note says above, I would say that IE and Firefox are closer to the intended CSS3 definition, since in Chrome you can't seem to change a table's box model using the box-sizingproperty.
因为 CSS3 还没有提到表格框的大小，所以这应该不足为奇。至少，结果是一样的——只是底层实现不同。但是考虑到上面的注释，我会说 IE 和 Firefox 更接近预期的 CSS3 定义，因为在 Chrome 中，您似乎无法使用该box-sizing属性更改表格的框模型。
Tables with the collapsing border modeldon't have padding at all, although in this case it's not relevant since your table does not use this model:
具有折叠边框模型的表格根本没有填充，尽管在这种情况下它不相关，因为您的表格不使用此模型：
Note that in this model, the width of the table includes half the table border. Also, in this model, a table does not have padding (but does have margins).
请注意，在此模型中，表格的宽度包括表格边框的一半。此外，在此模型中，表格没有填充（但有边距）。
回答by Shekhar K. Sharma
That's how <table><td><th>elements works. These elements are not block level elements.
这就是<table><td><th>元素的工作原理。这些元素不是块级元素。
It contains padding inside the given width like the box-sizing:border-boxwould do on other block level elements.
它包含在给定宽度内的填充，就像box-sizing:border-box在其他块级元素上所做的那样。
FYI, I didn't find it anywhere document.
仅供参考，我没有在任何文件中找到它。
