为什么 box-sizing 在 table 和 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

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

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

仅供参考，我没有在任何文件中找到它。

Answer 2

是的，CSS2.1 为带有separated borders model 的表声明了以下内容：

然而，在 HTML 和 XHTML1 中，

元素的宽度是从左边框边缘到右边框边缘的距离。

注意：在 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。

• Firefox
  -moz-box-sizing 设置为border-box；将其更改为 content-box 或 padding-box 会导致它相应地调整大小。

由于 CSS3 还没有提到表格框的大小，这应该不足为奇。至少，结果是相同的——只是底层实现不同。但考虑到上面的说明，我会说 IE 和 Firefox 更接近预期的 CSS3 定义，因为在 Chrome 中，您似乎无法使用 box-sizing 属性更改表格的框模型。

---

带有collapsing border model 的表格根本没有填充，尽管在这种情况下它不相关，因为您的表格不使用此模型：

请注意，在此模型中，表格的宽度包括表格边框的一半。此外，在此模型中，表格没有填充（但有边距）。

【讨论】：