1

首先：桌子，不是我的设计，我很抱歉。

我们有这个网站，出售的产品以表格布局显示。该网站已经上线，但似乎还没有经过足够彻底的测试。开发商放假了，我得修一下。问题在于盒子模型的解释，这里举个例子：

铬渲染： 铬渲染

带有萤火虫覆盖的 Firefox 渲染： 火狐渲染

发生的事情是 Chrome 将填充添加到 td 的高度（高度：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;
}

我试图改变displayto inline-block（和一些其他选项），这会正确设置高度，但后来我失去了我的background-color（默认回到表格本身的背景颜色）。如果我设置display: block，高度很好，但背景只为第一个单元格着色，它会忽略colspan="2".

根据MDN -moz-box-sizing: content-box;应该修复它，但这根本没有任何作用。

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

4

3 回答 3

0

我作弊了，但它有效。div在 ,里面添加了一个td，position:relative;height:55px;并且解决了它。我知道，这并不是一个非常好的解决方案，但它会一直持续到新网站上线（从现在起三周后）。

<td class="productFooter" colspan="2" >
    <div style="position:relative;height:55px">
    *all the content*
    </div>
</td>
于 2012-08-14T09:21:25.850 回答
0

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

因此，根据您的时间范围，最简单的方法可能是等到那时。

于 2012-08-17T03:37:07.943 回答
0

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

于 2012-08-14T09:01:10.953 回答