浏览器之间的TH盒模型的不同解释

Question

我注意到浏览器之间在如何解释TH标记的宽度方面的差异，具体而言是宽度计算中是否包含填充。

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

最简单的问题

甲TH在IE9和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％，并优雅地截断文本，即使宽度可变的单元格也是如此。

http://jsfiddle.net/6GPmY/

Answer 1

Firefox不支持box-sizing: content-box;然而，即使不是在他们极光版。

在那之前，你可以使用-moz-box-sizing：

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

jsFiddle Demo