Firefox＆amp; IE在使用display：table-cell的元素的渲染填充上彼此（但不是Chrome）达成一致

Question

我正在尝试创建一个使用横向堆叠的“刀片”内容的网站。包含它们的元素在带有overflow-x: hidden的div内横向移动，以创建所需的sidescrolling效果。这似乎工作正常：包含“blade”的元素设置为display: table; width: 100%; table-layout: fixed，每个刀片的样式如下：display: table-cell; width: 601px; border-right: 1px solid white; padding: 10px。最后，nav元素的宽度为621px，没有水平填充或边距。

这一切看起来都很简单，但我得到了一个非常奇怪的跨浏览器错误：Firefox和IE9就网页的外观达成一致，但Chrome有不同的看法。我已经弄明白了 Chrome正在做什么，但我无法弄明白为什么正在做这件事。

doctype的设置和其他一切似乎都运行正常。除了背景颜色，上面的规则都是我在样式表中定义的，并且没有内联样式。以下是一些说明问题行为的屏幕截图。

这是Firefox中的页面 - 根据需要，导航栏的右边缘与内容框的右边缘对齐。

在IE9中也是如此。

在Chrome中，从宽度中减去填充，从而创建上面显示的悬垂。我从未在样式表中的任何位置设置border-box，也不会在Chrome的计算规则中看到它 - 它只是说宽度是581px，而在其他两个浏览器中它是601px。

[注意：我看到有关于填充问题的其他帖子，但没有Firefox和IE9同意，Chrome做了不同的事情。]

修改这是一个JSFiddle链接：http://jsfiddle.net/aCeAw/

Answer 1

这只是Chrome中的一个错误。当它计算table-layout: fixed的列宽时，它会错误地忽略单元格填充。请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=652941中的讨论，并附上规范引用，以及https://bugs.webkit.org/show_bug.cgi?id=13339上差不多5年的WebKit错误报告。

您可以通过在display: table-column元素上使用宽度样式来解决此问题，如上面的Mozilla错误报告中所述。或者，您可以添加第一行，其中0高度没有填充，但是您想要的单元格宽度......我意识到这些都与实际的网站标记相混淆，当然，这可能不是您的选择。< / p>