Firefox中表格行的框模型解释

首先：桌子，不是我的设计，我道歉

我们有一个网站，在那里出售的产品以表格的形式展示。该网站已经上线，但似乎还没有经过充分测试。开发商在度假，所以我必须修理它。问题在于盒子模型的解释，这里有一个例子：

Chrome渲染：

Firefox渲染与firebug覆盖：

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:block

，则高度良好，但背景仅为第一个单元格着色，它会忽略

colspan=“2”

根据

-moz框大小：内容框

应该修复它，但那根本没用

---

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

我的建议是：扔掉桌子。只使用CSS编写表格样式的布局并不需要很长时间，特别是如果信息是从数据库生成的，比如产品数据。您只需事先自己编写代码，然后将其应用于实时站点。

我作弊了，但它确实有效。在

td

中添加一个

div

，位置为

相对；高度：55px就解决了这个问题。我知道这不是一个很好的解决方案，但在新网站上线之前（三周后）都可以


*全部内容*
这看起来像是Firefox16中修复的。10月9日发货

因此，根据您的时间范围，最简单的方法可能是等到那时。
如果开发人员在这里，这将是我的第一选择。他也是我的老板：Phaha很公平，但如果你成功了，他就不应该生气；）
<td class="productFooter" colspan="2" >
    <div style="position:relative;height:55px">
    *all the content*
    </div>
</td>