对主流浏览器“半个像素”渲染差异分析
[参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统:Windows]
像素都是单个单个显示的,绝对不会出现半个像素,那么0.63px这样的定义经各浏览器渲染之后得出什么样的结果呢?
经过偶不厌其烦的例举分析,得到以下结果并经过了一次验算,第二次验算在实战中用到它再说吧。
这个结果能用到什么场合呢?恩,我也不知道。囧rz。
但我相信既然有差异肯定就能起到hack的作用。可不要小看一个半个的像素,有时候它能起到很关键的作用,这个差异最大的特点就是几乎每个浏览器之间,均存在该差异。
一点说明:一般精确到1/1000就能看出各浏览器之间的差异,这里采用直接进一法来精确到1/1000。
border
IE6/IE7 | 1.000 = 1
OP9.6 | 0.995 = 1
Chrome2 | 0.990 = 1
SF3 | 0.98999998 = 1
IE8 | 0.010 = 1
FF3 | 0.009 = 1width
IE6/IE7 | 1.000 = 1
OP9.6 | 0.995 = 1
SF3 | 0.991 = 1
Chrome2 | 0.990 = 1
IE8 | 0.510 = 1
FF3 | 0.492 = 1margin负值
IE6/IE7 | 1.000 = 1
OP9.6 | 0.995 = 1
Chrome2 | 0.990 = 1
SF3 | 0.98999998 = 1
FF3 | 0.509 = 1
IE8 | 0.500 = 1margin正值
IE6/IE7 | 1.000 = 1
OP9.6 | 0.995 = 1
Chrome2 | 0.990 = 1
SF3 | 0.98999998 = 1
IE8 | 0.510 = 1
FF3 | 0.492 = 1padding
IE6/IE7 | 1.000 = 1
OP9.6 | 0.995 = 1
Chrome2 | 0.990 = 1
SF3 | 0.98999998 = 1
IE8 | 0.510 = 1
FF3 | 0.492 = 1
其中有几种比较特殊的情况:
[IE8/border:如果border-left与border-right同时存在,border-width:0.010时对width宽度造成影响,小于既定宽度2px,0.510时小1px,0.760时恢复正常。]
[IE8/padding:如果padding-left与padding-right同时存在,padding:0.260时出现right & bottom边框,0.510时出现top和bottom边框,0.760时才两者同时出现。]
[FF3/padding:如果padding-left与padding-right同时存在,padding:0.242时出现right & bottom边框,0.492时出现top和bottom边框,0.742时才两者同时出现。]
【几个属性同时使用时的情况太复杂了,FF简直寻不着规律,IE8还好点,以下举个例子,就不继续深入探讨了】
以IE8为例,padding和margin同时使用小数时:
设padding-left:0.510;(单独使用padding-left时,IE8下,0.510=1) margin-left:1px;为正常状态。
margin-left则不能使用小数,否则小数部分无效。
如果padding-left:0.520,margin-left则可使用49.99px。
博主很有钻研精神,小弟佩服
OMG!!!
OMG!!!
OMG!!!
OMG!!!
你很仔细,很钻研。(纯粹留名啊)
谢谢支持,但目前这东西的应用仅一例 - -! 不过对半个像素总算有了更深点的理解。