本文介绍了为什么 box-sizing 在 table 和 div 上的作用不同?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
的宽度是element 是左边框边缘到右边框边缘的距离.注意:在 CSS3 中，这一特殊要求将根据 UA 样式表规则和box-sizing"属性进行定义.
box-sizing的当前CSS3定义 对此没有任何说明，但翻译上面的引语，它基本上意味着在 (X)HTML 中，表格使用边框框模型:填充和边框不会添加到表格的指定宽度.
请注意，就 box-sizing 属性而言，不同的浏览器似乎对这种特殊情况的处理方式不同:
Chrome
box-sizing 设置为初始值，content-box；改变它没有任何影响.在内联样式中重新声明 box-sizing: content-box 也不会，但这应该是预期的.无论哪种方式，Chrome 似乎都在强制表格始终使用边框模型.
IE
box-sizing 设置为 border-box;将其更改为 content-box 会使其行为类似于第二个 div.
火狐
-moz-box-sizing 设置为 border-box;将其更改为 content-box 或 padding-box 会使其相应地调整大小.
因为 CSS3 还没有提到表格框的大小，所以这应该不足为奇.至少，结果是一样的——只是底层实现不同.但是考虑到上面的注释，我会说 IE 和 Firefox 更接近预期的 CSS3 定义，因为在 Chrome 中，您似乎无法使用 box-sizing 属性更改表格的框模型.
具有折叠边框模型的表格没有完全填充，尽管在这种情况下它不相关，因为您的表不使用此模型:
<块引用>请注意，在此模型中，表格的宽度包括表格边框的一半.此外，在此模型中，表格没有填充(但有边距).
Here's the 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:
I think I understand everything until the last one. My Chrome inspector shows the table's computed box-sizing style is content-box so 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?
解决方案
Yes, CSS2.1 states the following for tables with the separated borders model:
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.
The current CSS3 definition of box-sizing does 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.
Note that in terms of the box-sizing property, different browsers seem to handle this special case differently:
Chrome
box-sizing is set to the initial value, content-box; changing it has no effect whatsoever. Neither does redeclaring box-sizing: content-box within 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-sizing is set to border-box; changing it to content-box causes it to behave like the second div.
Firefox
-moz-box-sizing is set to border-box; changing it to content-box or padding-box causes it to resize accordingly.
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-sizing property.
Tables with the collapsing border model don'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).
这篇关于为什么 box-sizing 在 table 和 div 上的作用不同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
