Chrome中损失1%

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在他的文章CSS中的子像素问题中提供了一个很好的概述.

那里的图片显示了可能出现问题的一个很好的例子:

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

看看你的页面,这就是我得到的:

                 m     b     p     w     p     b     m   total
Chrome
column_header    6     1     -   674     -     1    13     695
column           6     -     -   215     -     -     6     227
Firefox
column_header    6     1     -   673     -     1    13     694
column           6     -     -   216     -     -     6     228