17

这是 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 规范中的某处？

4

2 回答 2

21

是的，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属性更改表格的框模型。

具有折叠边框模型的表格根本没有填充，尽管在这种情况下它不相关，因为您的表格不使用此模型：

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

于 2013-09-28T16:31:23.033 回答
3

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

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

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

于 2013-09-28T16:29:30.020 回答