1% 在 Chrome 中丢失

Question

我正在构建一个带有浮动 div 的 3 列布局。 我有一个 20px 填充的容器。在容器中，我有 1 个全宽块，然后是 3 列，然后是另一个全宽块。 列向左浮动。宽度：31%，边距：0 1%。这加起来是 99%； 全宽块的边距为 0 2% 0 1%。这也加起来高达 99%。

Mozilla 和 IE 完美呈现一切，但 Chrome 将全宽块再增加 1%。我无法理解计算。

你可以看看：schoolscout.co.uk。

Answer 1

因为不同的渲染引擎以不同的方式计算像素百分比。 John Resig 在他的文章 Sub-Pixel Problems in CSS 中提供了很好的概述。

其中包含的图片显示了可能出错的一个很好的例子：

Opera 和 Safari [以及其他基于 WebKit 的浏览器，MK] 将所有 div 的宽度向下舍入到 12px。这会在所有 div 的右侧留下 2px 的间隙（注意绿色）。如果您曾经想知道为什么在这些浏览器中您的良好对齐的导航没有填满容器的全部内容，现在您知道为什么了。从好的方面来说，至少你知道这些容器的宽度都是一样的，无论如何。

查看您的页面，我得到了以下信息：

 m b p w p b m 总计
铬
列标题 6 1 - 674 - 1 13 695
第 6 栏 - - 215 - - 6 227
火狐
column_header 6 1 - 673 - 1 13 694
第 6 栏 - - 216 - - 6 228