为什么box-sizing在表和div上的表现不同？ [英] Why is box-sizing acting different on table vs div?

问题描述

以下是HTML：：

但是，在HTML和XHTML1中，< table>元素是从左边界边缘到右边界边缘的距离。

注意：在CSS3中，这个特殊的要求将被定义为UA样式表规则和'box-sizing'属性。

box-sizing 没有说明任何内容，但是翻译上面的引用基本上意味着在（X）HTML中，表使用边框模型：填充和边框不添加到表的指定宽度。

注意，在框大小属性方面，不同的浏览器似乎处理这种特殊情况不同：

• Chrome
  
  盒尺寸设置为初始值， 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 code>属性。

---

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

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

Here's the 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>  

And it looks like this in my Chrome:

I think I understand everything until the last one. My Chrome inspector shows the table's computed box-sizing style is content-box so I expect it to behave like the second div, and overflow and look ugly. Why is it different? Is this documented somewhere in the HTML/CSS spec?

解决方案

Yes, CSS2.1 states the following for tables with the 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.

The current CSS3 definition of box-sizing does not say anything about this, but translating the above quote it basically means in (X)HTML, tables use the border-box model: padding and borders do not add to the specified width of a table.

Note that in terms of the box-sizing property, different browsers seem to handle this special case differently:

• Chrome
  box-sizing is set to the initial value, content-box; changing it has no effect whatsoever. Neither does redeclaring box-sizing: content-box within the inline styles, but that should be expected. Either way, Chrome appears to be forcing the table to always use the border-box model.

• IE
  box-sizing is set to border-box; changing it to content-box causes it to behave like the second div.

• Firefox
  -moz-box-sizing is set to border-box; changing it to content-box or padding-box causes it to resize accordingly.

Since CSS3 does not yet make any mention of table box sizing, this should not come as a surprise. At the very least, the result is the same — it's only the underlying implementation that's different. But given what the note says above, I would say that IE and Firefox are closer to the intended CSS3 definition, since in Chrome you can't seem to change a table's box model using the box-sizing property.

---

Tables with the collapsing border model don't have padding at all, although in this case it's not relevant since your table does not use this 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).

这篇关于为什么box-sizing在表和div上的表现不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！