首先：桌子，不是我的设计，是我的道歉。
我们在这个网站上以表格的形式显示正在销售的产品。该网站已经启用，但似乎尚未经过充分测试。开发人员正在休假，所以我必须修复它。问题在于盒子模型的解释，这里举一个例子：
Chrome渲染：
带有Firebug覆盖的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;
}
我试图将
display更改为inline-block（以及其他一些选项），这样可以正确设置高度，但是随后我丢失了background-color（默认值恢复为表格本身的背景色）。如果我将display: block设置为高度，但是背景仅对第一个单元格进行着色，它将忽略colspan="2"。根据MDN
-moz-box-sizing: content-box;应该修复它，但这根本不起作用。有谁知道如何解决这个问题？
最佳答案
我的建议是：把桌子扔掉。仅使用CSS编写表格样式布局就花了很长时间-特别是如果信息是从数据库生成的，例如产品数据。只需事先自己编写代码，然后将其应用到实际网站即可。
关于firefox - Firefox中表格行的框模型解释，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11948709/