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

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

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

问题的最简单描述

A TH在 IE9 和 FF 中，其大小基于其内边距 + 宽度（如预期）。 Chrome 和 Safariinclude宽度的填充，导致不良结果。

例如，如果单元格设置为 16 像素宽 + 4 像素内边距，则 IE9 会正确地将单元格显示为 20 像素宽。 Chrome 将其显示为 16 像素宽。

这是一个显示差异的 JS Fiddle：http://jsfiddle.net/CZnau/ http://jsfiddle.net/CZnau/

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

Notes

• 我知道盒子大小，即使默认值是not在单元格的宽度计算中包括填充，设置box-sizing: content-box明确并不能解决问题。

• 小提琴显示一个固定布局表。我想使用table-layout: fixed以在其他场景下正确处理显示。具体来说，我的实际实现使用文本溢出、换行管理和可变宽度布局。在我的测试中，使用固定布局是使我的所有需求很好地协同工作的唯一可靠方法。另外，固定布局表可能会渲染得更快。

• 我尝试过明确设置每个的宽度TD，但这并不能解决问题（也许它与固定布局表冲突？）

如果您想了解更多详细信息why我需要一个固定的布局表，请尝试使用和不使用这个小提琴table-layout: fixed并注意差异。通过固定布局，表格的大小正确为 100%，并且即使单元格宽度可变，也可以优雅地截断文本。

http://jsfiddle.net/6GPmY/ http://jsfiddle.net/6GPmY/

火狐浏览器不支持box-sizing: content-box;然而，甚至在他们的极光版本中也没有。

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

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

jsFiddle 演示 http://jsfiddle.net/6GPmY/138/