Css Firefox&；IE同意（但不同意Chrome）使用display:table cell为元素呈现填充

我正在尝试创建一个使用横向堆叠的内容“刀片”的网站。包含它们的元素在div中横向移动，并带有

overflow-x:hidden

，以创建所需的侧滚效果。这似乎工作正常：包含“刀片”的元素设置为

display:table；宽度：100%；表格布局：固定

，每个刀片的样式如下：

显示：表格单元格；宽度：601px；右边框：1px纯白；填充：10px

。最后，nav元素的宽度为621px，没有水平填充或边距

这一切看起来都很简单，但我遇到了一个非常奇怪的跨浏览器错误：Firefox和IE9在页面外观上达成一致，但Chrome却有不同的看法。我已经弄明白了Chrome在做什么，但我还没弄明白它为什么这么做

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

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

IE9中也是如此

在Chrome中，填充从宽度中减去，从而创建如上所示的悬挑。我从来没有在样式表的任何地方设置过

边框框

，也没有在Chrome的计算规则中看到它-它只是说宽度是581px，而在其他两个浏览器中是601px

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

---

编辑这里有一个JSFiddle链接：

这只是Chrome中的一个bug。当它计算

表布局：fixed

的列宽时，它会错误地忽略单元格填充。请参阅完整的讨论和规范引用，以及几乎5年前的WebKit错误报告，网址为

---

您可以通过在

display:table column

元素上使用宽度样式来解决此问题，如上面的Mozilla bug报告中所述。或者，您可以添加高度为0且没有填充的第一行，但您需要的单元格宽度。。。我意识到这两个问题都与实际的站点标记有关，当然，在您的情况下，这可能不是一个选项。

这只是Chrome中的一个bug。当它计算

表布局：fixed

的列宽时，它会错误地忽略单元格填充。请参阅完整的讨论和规范引用，以及几乎5年前的WebKit错误报告，网址为

---

您可以通过在

display:table column

元素上使用宽度样式来解决此问题，如上面的Mozilla bug报告中所述。或者，您可以添加高度为0且没有填充的第一行，但您需要的单元格宽度。。。我意识到这两个问题都与实际的站点标记有关，当然，在您的情况下，这可能不是一个选项。

没有链接或JSFIDLE，我们只能胡乱猜测；每个浏览器呈现的fiddle与上面的屏幕截图相同。您当前使用的是CSS重置吗？在（ubuntu）firefox中，fiddle每晚呈现不同且稳定，特别是在div.blade-viewer.home中，屏幕大小随屏幕大小变化的速率与导航栏不同。这似乎与您描述的渲染不同，您能确认这些差异吗？不幸的是，这看起来像Firefox中的一个bug；导航的宽度当前为精确的像素宽度（621px），包含的

ul

元素设置为

width:100%

以填充空间。你能检查一下导航的宽度规则是否仍然适用吗？如果没有链接或JSFIDLE，我们只能胡乱猜测；每个浏览器呈现的fiddle与上面的屏幕截图相同。您当前使用的是CSS重置吗？在（ubuntu）firefox中，fiddle每晚呈现不同且稳定，特别是在div.blade-viewer.home中，屏幕大小随屏幕大小变化的速率与导航栏不同。这似乎与您描述的渲染不同，您能确认这些差异吗？不幸的是，这看起来像Firefox中的一个bug；导航的宽度当前为精确的像素宽度（621px），包含的

ul

元素设置为

width:100%

以填充空间。你能检查一下导航的宽度规则是否仍然适用吗？