The 1 Pixel Rounding Error Problem

理论

当 boxes 被 rendered ，这些盒子的尺寸如果是 "relative" 单位 (units) ，例如 百分比 或 EM's  ，这样浏览器就必须算出来需要用多少 screen pixels 来设置盒子的尺寸。问题就是这些相对单位并不总是在所有浏览器里面都精确到相同数字的像素，但是所有盒子又必须计算出来精确的像素。这就清楚了，一个完美的解决方案并不是不可能。

尽管如此，必须找到一个解决方案，这样浏览器有时 "四舍五入" ，以便在内部计算时得出一个简单的像素值来设置盒子的尺寸。然而，由于很多负责的原因 "四舍五入" 在是 "舍" 还是 "入" 时，出现错误的方向，导致在这些盒子旁边可以看见的一个像素的 gap (或者有时 1 pixel overlap) 。有些情况下，只有一个盒子也会发生这个问题。

The demo

上面的例子距离说明了这个问题，一个5*5的矩阵，元素采用绝对定位，百分比设置大小的黑色盒子，它们会连接起来组成一个无缝隙大的黑色的盒子。如果 rounding errors occur，它们会出现水平方向和垂直方向的 thin gaps 穿过 big box。因为盒子是用百分比设置大小的，所以当窗口的大小严重影响 gaps 是否会出现。

Testing

如果你 resize 浏览器窗口，你会在这个例子中看到不同的 arrangements of gaps 。

How the browsers stack up (as of June 2009)

Firefox 3 是 June of 2008  released 的，无论如何，它都不会出现 rounding errors 。这是一个令人钦佩的成就。Internet Explorer 8 (released March of 2009) 也会显示一个干净的测试区，没有任何错误。

IE 7 在有些 window widths 下会出错。

原文地址：

http://www.positioniseverything.net/round-error.html