The 1 Pixel Rounding Error Problem
2011-11-11 13:38
246 查看
理论
当 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
相关文章推荐
- VS2008 编译出错 fatal error C1859: unexpected precompiled header error, simply rerunning the compiler might fix this problem
- Fix the problem: java.lang.OutOfMemoryError: PermGen space in Java development
- 解决PHP curl https时error 77(Problem with reading the SSL CA cert (path? access rights?))
- ios 提交 App Store Error Problem with Icon.png (Icon specified in the Info.plist not found under the t
- Error: Socket descriptor not found. Hint: the problem might be solved applyi...
- last error : SSL certificate problem, verify that the CA cert is OK. Details: error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate veri
- curl 函数执行了之后返回false解决,打印错误信息返回PHP的Curl出现:curl call error(77): Problem with the SSL CA cert (path? ac
- android studio异常Error:A problem was found with the configuration of task ':app:zipalignDebug'.
- Error:Unable to start the daemon process. This problem might be caused by incorrect configuration of
- curl call error(77): Problem with the SSL CA cert (path? access rights?)
- Error:A problem was found with the configuration of task ':app:packageRelease'. > File 'F:\AndroidSt
- error: (-5) in the case of classification problem the responses must be cate
- for the problem ImportError: cannot import name symbol_database 'text_format'
- windows 下git commit问题("error: There was a problem with the editor 'vi'")
- for the problem ImportError: cannot import name symbol_database 'text_format'
- Error:A problem was found with the configuration of task ':app:packageAliRelease'.
- 打包出现这个错误Error:A problem was found with the configuration of task ':app:packageRelease'.
- Error:A problem was found with the configuration of task ':app:packageDebug'. > File 'F:\androidstud
- Error:Unable to start the daemon process. This problem might be caused by incorrect configuration of
- curl error: Problem with the SSL CA cert (path access rights?) 的解决方法