Firefox：盒子模型的错误解释？

Question

我刚刚发现了Firefox的奇怪行为。

如果我有一个100px高度的表格单元格，并为其添加20px填充 - 它的总高度应该变为140px。

所有浏览器都正常运行，Firefox 8.0忽略了填充：

http://jsfiddle.net/8wDde/

任何人都知道修复？

Answer 1

似乎最好的跨浏览器解决方案可能是将表格行的完整高度设置为等于单元格的高度和填充：

tr {height: 140px;}

请参阅：http://jsfiddle.net/8wDde/19/

Answer 2

这是一种奇怪的表现。添加display:block;可以解决问题。在FF8.01中测试，请参阅：

http://jsfiddle.net/8wDde/1/

但我也不知道为什么？

我在https://developer.mozilla.org/en-US/search?q=table+padding搜索，但没有找到任何内容。也许你也可以尝试在那里搜索。

<强>更新 http://jsfiddle.net/8wDde/7/

添加overflow:hidden以避免td更改行。

Answer 3

我在Google上找不到关于此的任何信息，因此修复Firefox的一种方法是使用CSS黑客。

@-moz-document url-prefix() {
td{
    height:140px !important;
}
}

显然，如果高度为200px，那么您可以将其更改为240px，以便在顶部和底部考虑丢失的20px。

针对所有Firefox版本，我不确定是否有FF8特定的css hack。

您可以在此处查看此演示：http://jsfiddle.net/charlescarver/8wDde/2/

编辑：我更喜欢Giberno的回答

Answer 4

这是对我在another question上发表的一些评论的更完整描述，希望有点清楚。请注意，Opera具有与Firefox相同的行为。

在上图中，总单元格区域是暗框，文本My Text是td的内容，它是定义单元格框（C）的内容。 / p>

现在，CSS 2.1规范说：

  

用户计算“table-row”元素框的高度   agent有行中的所有单元格可用：它是最大的单元格   row的计算'height'，计算出的每个单元格的'height'   行，以及单元格所需的最小高度（MIN）。 '身高'   'table-row'的'auto'值表示用于布局的行高   是MIN。 MIN取决于细胞盒高度和细胞盒对齐（很多   比如计算一个线框高度）。 ...

     

在CSS 2.1中，单元格框的高度是所需的最小高度   内容。表格单元格的“高度”属性可以影响   行的高度（见上文），但它不会增加高度   细胞盒。

所以td { height:100px; }会影响行高（R）（它至少会高出100px），但不影响Cell Box（C）。

另一方面，td { padding:20px; }适用于Cell Box（C），因此如果（C）+ Top Padding + Bottom Padding的高度小于100px，则行高度不受影响且仍然100px的。

如果（C）+ Top Padding + Bottom Padding大于100px，行高将扩展以适应（C）+ Top Padding + Bottom Padding的整个高度。

然后td { background-color:blue }适用于整行高度（R）和单元格宽度。

您可以在http://jsfiddle.net/Ez7xz/

看到这一点

最后的混淆因素是Firebug中td的计算高度值。这里似乎发生的是假设高度是content-box框大小的结果，并且报告R的值减去顶部和底部填充。虽然这看起来很奇怪，但是它可以合理报告的其他价值并不明显。