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

我刚刚发现Firefox的奇怪行为

如果我有一个高度为100px的表格单元格，加上20px的填充，它的总高度应该是140px

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

---

有人知道修复方法吗？

这是一种奇怪的行为。添加

显示：块可以解决此问题。在
FF8.01中测试
请参见：


但我也不知道为什么

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

更新：

添加
overflow:hidden
以避免
td
更改行
 我在谷歌上找不到任何关于这方面的信息，所以在Firefox上修复它的一种方法是使用CSS黑客

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

显然，如果高度是
200px
，那么您需要将其更改为
240px
，以解释顶部和底部缺少的
20px

这是针对所有Firefox版本的，我不确定是否存在特定于FF8的css攻击

您可以在此处看到此演示：

编辑：我更喜欢Giberno的答案
似乎最好的跨浏览器解决方案是将表格行的全高设置为单元格的高度和填充：

tr {height: 140px;}

请参阅：

这是对我的一些评论的更全面的描述，希望能更清楚一点。请注意，Opera的行为与Firefox相同

在上图中，整个单元格区域是黑框，文本
My text
是
td
的内容，正是它定义了单元格框（C）

现在，CSS 2.1规范说明：

“表行”元素框的高度在用户
代理具有行中所有可用的单元格：它是
行的计算“高度”，即行中每个单元格的计算“高度”
行，以及单元格所需的最小高度（MIN）。“高度”
“表格行”的“自动”值表示用于布局的行高度
是最小值。最小值取决于单元格框高度和单元格框对齐（更多
如线框高度的计算）

在CSS 2.1中，单元格框的高度是
内容。表格单元格的“高度”属性可能会影响
行的高度（请参见上文），但它不会增加行的高度
牢房

因此
td{height:100px；}
会影响行高（R）（至少会达到100px高），但不会影响单元格框（C）

另一方面，
td{padding:20px；}
适用于单元格框（C），因此如果（C）+顶部填充+底部填充的高度小于100px，则行高度不受影响，仍然是100px

如果（C）+顶部填充+底部填充大于100px，则行高度将扩展以适应（C）+顶部填充+底部填充的全高

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

你可以在网站上看到这一点

最后一个令人困惑的因素是Firebug中
td
的计算高度值。这里似乎发生的事情是，它假设高度是
内容框
框大小的结果，并报告R值减去顶部和底部填充。虽然这看起来很奇怪，但不清楚它还能合理地报告什么其他值。
在Firebug中，它确实计算了填充，但计算的高度是
60px
。也许Firefox的默认样式存在一些问题。重置样式也不起作用。。。（）你是说CSS重置？同样的结果。。。一种解决方案是将单元格的内容包装在一个DIV元素中，然后在该DIV而不是表格单元格上设置高度…@ŠimeVidas是的，这就是我现在修复它的方式-我认为这是未来最好的修复方法。
td
标记似乎没有设置
display:block
。但这是一个奇怪的块元素。+1的创造性-然而-它只适用于带有一个单元格的表格：-/@rekire表格单元格的默认
display
值是
table cell
。你是对的，我忘了这一点。这对我来说也适用于多个牢房。（Firefox 8.0）@rekire否，如果我将td设置为display:block，它们将垂直放置，而不是水平放置。我还尝试了内联块，但正如预期的那样，如果表的宽度太小，td将跳转到下一行……如果所有其他操作都失败，则播放dirty；）