firefox - Firefox中表格行的盒模型解释

Question

首先:表格，不是我的设计，我很抱歉。

我们有这个网站，销售的产品以表格布局显示。该网站已经上线，但似乎还没有经过足够彻底的测试。开发人员放假了，所以我必须修复它。问题在于盒子模型的解释，这里有一个例子:

Chrome 渲染:

带有 Firebug 覆盖的 Firefox 渲染:

发生的事情是 Chrome 将填充添加到 td 的高度(height: 55px + padding-top: 5px + padding bottom: 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 编写表格样式布局不需要很长时间 - 特别是如果信息是从数据库生成的，例如产品数据。只需事先自己编写代码，然后将其应用到实时站点即可。