Question

我注意到浏览器之间在如何解释TH标签的宽度方面存在差异，特别是宽度计算中是否包含填充。

我正在构建一个可重用的库，用于快速生成和设置表格（当然，还有表格数据）。这意味着我可以完全控制我生成的代码，但是我需要实际解决问题而不是找到特定实例的hack。

最简单的问题描述

IE9中的TH和FF的大小基于其填充+宽度（如预期的那样）。 Chrome和Safari 包含宽度的填充，从而导致不良后果。

例如，如果单元格设置为16px宽+ 4px填充，则IE9正确显示单元格为20px宽。 Chrome将其显示为16px宽。

这是一个JS小提琴，显示了差异：http://jsfiddle.net/CZnau/

您可以看到最后一个单元格在浏览器之间的大小不同。

备注

我知道框大小，即使默认是不包含单元格宽度计算中的填充，显式设置box-sizing: content-box也无法解决问题
小提琴显示固定的布局表。我希望使用table-layout: fixed在其他方案中正确处理显示。具体来说，我的实际实现使用文本溢出，包装管理和可变宽度布局。在我的测试中使用固定布局是唯一可靠的方法，使我的所有要求很好地协同工作。此外，固定布局表可能会更快地呈现。
我已尝试在每个TD上明确设置宽度，但这不能解决问题（可能与固定布局表冲突？）

如果你想了解更多关于为什么的详细信息，我需要一个固定的布局表，请尝试使用和不使用table-layout: fixed的小提琴，并注意差异。使用固定布局，即使使用可变宽度单元格，表格也可正确调整为100％并优雅地截断文本。

Answer 1

Firefox还不支持box-sizing: content-box;，甚至不支持Aurora版本。

在此之前，您可以使用-moz-box-sizing：

th, td {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px;
}