CSS 表格显示差异 - Chrome 与 Firefox

Posted 2023-03-06

【中文标题】CSS 表格显示差异 - Chrome 与 Firefox

【英文标题】：CSS Table Display Differences - Chrome Vs Firefox

【发布时间】：2012-01-12 17:36:15

【问题描述】：

我最近注意到，尽管在 Firefox 中显示良好，但我的网站在 Chrome 中出现故障。在我的页面上研究了 html 和 CSS -

http://www.designlagoon.com/what-we-do/

Chrome 中 4 个蓝色标题下方的间隙比 Firefox 中的大 - 这打破了包含框的框架。这似乎与我正在使用的表格布局的填充/边距有关，但我正在努力解决问题。

如果有人能阐明可能导致问题的原因，我将不胜感激！

【问题讨论】：

用于布局的表格是一种罪过，但这可能与您的问题没有任何关系（尽管它很可能是问题的根源）...您能否向我们展示适用于您的“表格”的标记和 CSS 部分？

【参考方案1】：

这与我昨天发布的一个问题有关：Firefox: wrong interpretation of box model?

实际上，运行正确的是 Chrome：td 高度为 150px + padding 15px (x2) = 180px。

Firefox 在向 td 添加填充时计算错误。

因此，您最好的办法是删除单元格上的填充，并为其内容添加边距。

【讨论】：

我不相信 Firefox 是错误的，因为 Opera 也是如此。我认为这与 CSS 2.1 规范中的微妙之处有关。它说“在 CSS 2.1 中，单元格框的高度是内容所需的最小高度。表格单元格的 'height' 属性可以影响行的高度（见上文），但它不会增加细胞箱。”这意味着单元格框最终是行的高度减去填充，这是 Firefox 和 Opera 所做的。或者类似的东西——但我承认我不确定。

@Alohci 你提到的 CSS 规范不包括元素的填充。如果我为表格单元格指定一个高度，Chrome 和 Firefox（正确）只扩展行高，单元格框的高度仍然限制为其内容所需的高度 - 例如。 jsfiddle.net/8wDde 中的桌子上的 20px，20px 是标准行高。但是，如果我向表格单元格添加填充，则应将此填充添加到高度集（= 边框大小，而不是内容框大小），从而扩大行高。这是一个报告的错误：tinyurl.com/clde2yh

看看jsfiddle.net/Ez7xz 我想说的是填充被添加到内容中 - 而不是单元格中。只有当内容高度加上填充的总和超过行的高度时，单元格高度才会改变以反映行的高度。 Firebug 中报告的计算高度是一种反向计算，从单元格高度中减去填充，就好像它假设存在内容框大小一样，但实际上并非如此（它也不是边框框，而是其他东西) 这可能解释了为什么这个错误——如果它是这样的话——在 6 年内没有得到修复。

这太愚蠢了！很抱歉，这条评论对讨论没有帮助，但我很想对浏览器之间存在计算差异这一事实进行咆哮！导致我为此烧了一个小时。只需选择一个标准...... uuf。

【参考方案2】：

感谢您的建议。我尝试从表格和 td 中删除填充并将其应用于段落。这在一定程度上改善了问题，但在 Firefox、IE 和 chrome 中仍然存在不同的边框。

最后我们决定完全移除表格并使用 4 个浮动的 25% 列来代替。将来我将避免在任何站点布局中使用表格。吸取教训！