我正在建立带有浮动div的3列布局。
我有一个20px填充的容器。在容器中,我有1个全角块,然后是3列,然后是另一个全角块。
列浮动到左侧。宽度:31%,边距:0 1%。这总计达到99%;
全宽块的边距为0 2%0 1%。总计也达到99%。

Mozilla和IE可以完美呈现所有内容,但是Chrome向全宽块添加了1%。我不明白计算结果。

您能否看一下:schoolscout.co.uk

最佳答案

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

此处包含的图片显示了可能出错的一个很好的示例:


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


查看您的页面,这是我得到的:

总计

column_header 6 1-674-1 13 695
栏6--215--6227
火狐浏览器
column_header 6 1-673-1 13 694
栏6--216--6228

关于css - Chrome损失了1%,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/5438148/

10-09 06:57