为什么box-sizing在table vs div上的表现不同？

Question

这是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>  

它在我的Chrome中看起来像这样:

我想我知道所有事情,直到最后一个.我的Chrome检查器显示了表的计算box-sizing样式,content-box所以我希望它的行为类似于第二个div,溢出并且看起来很难看.它为什么不同？这是在HTML/CSS规范中的某处记录的吗？

Answer 1

是的,CSS2.1为具有分隔边框模型的表声明了以下内容:

但是,在HTML和XHTML1中,<table>元素的宽度是从左边框边缘到右边框边缘的距离.

注意:在CSS3中,这个特殊要求将根据UA样式表规则和"box-sizing"属性来定义.

当前的CSS3定义box-sizing没有说明这一点,但翻译上面的引用它基本上意味着在(X)HTML中,表使用边框模型:填充和边框不会添加到表的指定宽度.

请注意,就box-sizing属性而言,不同的浏览器似乎不同地处理这种特殊情况:

• 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使其相应地调整大小.

由于CSS3还没有提到表盒大小,所以这不应该是一个惊喜.至少,结果是相同的 - 它只是底层实现的不同.但考虑到上面的说明,我会说IE和Firefox更接近于预期的CSS3定义,因为在Chrome中你似乎无法使用该box-sizing属性更改表格的盒子模型.

具有折叠边框模型的表根本没有填充,但在这种情况下它不相关,因为您的表不使用此模型:

请注意,在此模型中,表的宽度包括表边框的一半.此外,在此模型中,表没有填充(但有边距).

Answer 2

这就是<table> <td> <th>元素的工作原理。这些元素不是块级元素。

它包含给定宽度内的填充，就像box-sizing:border-box在其他块级元素上所做的那样。

仅供参考，我在任何地方都没有找到它的文档。