为什么box-sizing在表和div上的表现不同? [英] Why is box-sizing acting different on table vs div?
问题描述
以下是HTML::
但是,在HTML和XHTML1中,< table>元素是从左边界边缘到右边界边缘的距离。
注意:在CSS3中,这个特殊的要求将被定义为UA样式表规则和'box-sizing'属性。
box-sizing
没有说明任何内容,但是翻译上面的引用基本上意味着在(X)HTML中,表使用边框模型:填充和边框不添加到表的指定宽度。
注意,在框大小
属性方面,不同的浏览器似乎处理这种特殊情况不同:
-
Chrome
盒尺寸
设置为初始值,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
会导致其相应调整大小。
因为CSS3还没有提到表框大小,所以不应该感到惊讶。至少,结果是一样的 - 它只是底层的实现是不同的。但是考虑到上面的注释,我会说IE和Firefox更接近于预期的CSS3定义,因为在Chrome中你似乎不能使用 box-sizing > code>属性。
包含折叠边框模型根本没有填充,虽然在这种情况下它不相关,因为您的表不使用此模型:
请注意,在此模型中,表格的宽度包括表格边框的一半。此外,在此模型中,表没有填充(但有边距)。
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 redeclaringbox-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 toborder-box
; changing it tocontent-box
causes it to behave like the seconddiv
.Firefox
-moz-box-sizing
is set toborder-box
; changing it tocontent-box
orpadding-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在表和div上的表现不同?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!