TH盒子模型在浏览器之间的不同解释 [英] Different Interpretation of TH Box Model Between Browsers
问题描述
我注意到浏览器之间如何解释 TH 标签的宽度差异，特别是宽度计算中是否包含填充。
I'm noticing discrepancies between browsers in how the width of a TH tag is interpreted, specifically whether or not padding is included in the width calculation.
我正在构建一个可重用的库，用于快速生成表和样式表（当然，对于表格数据）。这意味着我完全控制了我生成的代码，但是我需要实际解决问题，而不是为特定实例发现一个hack。
I am building a reusable library for quickly generating and styling tables (for tabular data, of course). This means that I have full control over the code I generate, but that I need to actually solve the problem versus finding a hack for a particular instance.
说明问题
A TH 的大小取决于其padding + width （如预期）。 Chrome和Safari 在宽度中包含填充，导致不良结果。
A TH in IE9 and FF is sized based on its padding + width (as expected). Chrome and Safari include the padding in the width, leading to undesirable results.
例如，如果单元格设置为16px宽+ 4px的填充，IE9正确显示单元格为20像素宽。
For example, if the cell is set to 16px wide + 4px of padding, IE9 correctly displays the cell as 20px wide. Chrome displays it as 16px wide.
这里是一个JS小提琴显示的区别： http://jsfiddle.net/CZnau/
Here is a JS Fiddle showing the differences: http://jsfiddle.net/CZnau/
您可以看到最后一个单元格的大小在浏览器之间有何不同。
You can see how the last cell is sized differently between browsers.
注释
-
我知道box-sizing即使默认是不包括单元格的宽度计算中的填充，设置
box-sizing：content-box显式不会修复
I am aware of box-sizing and even though the default is to not include the padding in width calculation of a cell, setting
box-sizing: content-boxexplicitly does not fix the problem.
小提琴显示一个固定的布局表格。我希望使用 table-layout：fixed 在其他情况下正确处理显示。具体来说，我的实际实现使用文本溢出，包装管理和可变宽度布局。在我的测试中使用固定布局是唯一可靠的方法，使我所有的需求一起玩得很好。
The fiddle shows a fixed layout table. I wish to use table-layout: fixed to handle display correctly in other scenarios. Specifically, my actual implementation uses text-overflow, wrapping management, and variable width layouts. In my testing using a fixed layout is the only reliable way to make all my requirements play together nicely. Plus, fixed layout tables potentially render more quickly.
我已经尝试在每个 TD上显式设置宽度
在这种情况下，想要更多细节为什么我需要一个固定的布局表，尝试这个小调与没有 table-layout：fixed 并注意差异。使用固定的布局，表格大小正确，大小设置为100％，并且可以优雅地截断文本，即使有可变宽度的单元格。
In case you want more details around why I need a fixed layout table, try this fiddle with and without table-layout: fixed and note the differences. With a fixed layout, the table is correctly sized to 100% and truncates text elegantly, even with a variable width cell.
推荐答案
Firefox不支持 box-sizing：content-box; ，甚至不支持他们的Aurora版本。
Firefox doesn't support box-sizing: content-box; yet, not even in their Aurora Version.
直到那时，您可以使用 -moz-box-sizing ：
Until then you can use -moz-box-sizing:
th, td {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
}
这篇关于TH盒子模型在浏览器之间的不同解释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
