女王控的博客

浏览器样式小数的处理

解析差异

上面一行是11.9像素大小的文字,下面一行是11.4像素大小的文字,看看各个浏览器下都表现得怎么样:

IE6浏览器下(IE下与此表现一致,避免重复,IE7下图略)

2020 01 03 18 01 47

Firefox浏览器下

2020 01 03 18 02 17

chrome浏览器下(Safari同内核,同表现)

2020 01 03 18 02 36

当文字大小11.9像素时,IE6和Firefox等浏览器的表现是不一致的。IE6下显示的是11像素大小的文字效果,而Firefox等w3c标准的浏览器则12像素显示,这就是差异所在,也是本文的关键核心所在。但在12.4像素下,各个浏览器表现都是一致的。

IE(IE8未测)与其他浏览器对于小数像素的解析差异:IE对小数像素采取取整的策略,类似于Math.floor()方法,就算你大小为11.999999像素,最后还是显示11像素文字的大小(已测试);而Firefox等一些浏览器则采取四舍五入的策略,类似于Math.round()方法,11.4像素就表现为11像素,11.5像素就表现为12像素(已测试)。由于平时很少有人用小数值,所以这种差异很少有人注意,所以很少有人关注。然而这个不起眼的浏览器差异有时候却是解决一些兼容性问题的绝妙武器。

IE8浏览器下对于小数的解析与Firefox,Chrome等浏览器一致。

应用

例如,淘宝首页css代码里面有这么一段hack,见下图(图对应淘宝网首页上部搜索选项卡样式):

2020 01 03 19 41 05

这段hack是个相差1像素的hack,用“*”表示区分IE和其他浏览器。我们验证过IE和其他浏览器对小数值的解析是有差异的,准确说是小数点后大于5的小数值像素解析是有差异的,而这个差异正好可以解决这里的兼容性问题,于是这个hack就可以一脚踢掉了。直接改成下面的样式就可以了:

padding: 0 11.9px;

不仅仅缩短的代码的长度,还节省了一个css hack。首先加载文件小了,其次去掉一个hack,资源消耗少了。不用小看这么一点小小的节省,这可是淘宝网的首页,每天的浏览量可是相当惊人的哦!

附上demo实例页面验证结果图放大800倍的对比图,从photoshop上沿标尺可以读出padding值,您可以发现IE6下11像素,而Firefox浏览器下12像素。这与hack达到了同样的功效,但是代码却是没有hack,更简短更简明,更神奇,您不妨也试试!

2020 01 03 19 50 40

总结

虽说这个小数值解决一些兼容性问题很神奇,但是它的缺点也很明显,就是适用范围问题,只能解决相差1像素的浏览器差异,只能解决IE下值小1像素的浏览器差异。

评论

阅读下一篇

html与body的一些特性
2019-12-31 11:07:41
0%