Firefox中表格行的Box模型解释

Question

首先：表格，而不是我的设计，我的道歉。

我们有这个网站，销售的产品以表格形式显示。该网站已经上线，但似乎尚未经过足够的测试。开发人员正在度假，所以我必须解决它。问题出在盒子模型解释中，这里有一个例子：

Chrome渲染：

使用firebug overlay进行Firefox渲染：

正在发生的事情是Chrome将填充添加到td的高度（高度：55px +填充顶部：5px +填充底部：10px = 70px），而Firefox保持给定的高度并在内部添加填充。我认为盒子模型问题是IE的事情，但是唉。

然而，糟糕的部分是我似乎无法解决它。 td有一个colspan="2"，我认为用css进行干预。

td.productFooter {
    background-color: #C4BFB9;
    height: 55px;
    padding-bottom: 10px;
    padding-top: 5px;
}

我已尝试将display更改为inline-block（以及其他一些选项），这会正确设置高度，但之后我丢失了background-color（默认返回到表格的背景颜色）。如果我设置display: block，高度不错，但背景只为第一个单元格着色，则会忽略colspan="2"。

根据MDN -moz-box-sizing: content-box;应该修复它，但这根本不起作用。

有没有人知道如何解决这个问题？

Answer 1

我的建议：放弃桌子。使用CSS编写表格样式布局不需要很长时间 - 特别是如果信息是从数据库生成的，就像产品数据一样。请事先自己编写代码，然后将其应用到实际网站。

Answer 2

我作弊，但它确实有效。在div内添加td，position:relative;height:55px;并解决了问题。我知道，这不是一个非常好的解决方案，但它会一直运行，直到新网站上线（从现在起三周）。

<td class="productFooter" colspan="2" >
    <div style="position:relative;height:55px">
    *all the content*
    </div>
</td>

Answer 3

这看起来像https://bugzilla.mozilla.org/show_bug.cgi?id=248239，已在Firefox 16中修复。它将于10月9日发货。

因此，根据您的时间表，最简单的事情可能就是等到那时。