html – 为什么box-sizing在表vs div上有所不同？

这是 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检查器显示表的计算框大小的样式是内容框,所以我期望它的行为像第二个div,溢出和看起来丑陋.为什么会有所不同？这是否记录在HTML / CSS规范中的某个地方？

解决方法

是的,CSS2.1在 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.

目前的box-sizing的CSS3定义并没有说什么,但是翻译上面的引用它基本上意味着在(X)HTML中,表使用了边框模型：padding和border不添加到指定的表宽度.

请注意,根据盒子大小的属性,不同的浏览器似乎以不同的方式处理这种特殊情况：

> Chrome
框大小设置为初始值,内容框;改变它没有任何影响.重新声明Box-sizing：内联样式中的content-Box,但应该是预期的.无论哪种方式,Chrome似乎强制表格始终使用边框模型.
> IE
框大小设置为边框;将其更改为内容框会导致其与第二个div类似.
> Firefox
-moz-Box-sizing设置为border-Box;将其更改为内容框或填充框将导致相应调整大小.

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

具有collapsing border 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).

原文地址：https://www.jb51.cc/html/224819.html