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. 这是 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 @R_419_6826@ this peculiar requirement will be defined in terms of UA style sheet rules and the ‘Box-sizing’ property.

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

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

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

由于@R_419_6826@还没有提及桌面大小,所以这不应该是一个惊喜.至少,结果是一样的 – 只是底层的实现是不同的.但是考虑到上面的注释,我会说IE和firefox更接近于预期的@R_419_6826@定义,因为在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).

总结

以上是内存溢出为你收集整理的html – 为什么box-sizing在表vs div上有所不同？全部内容，希望文章能够帮你解决html – 为什么box-sizing在表vs div上有所不同？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。