鲜为人知的一个解决兼容性问题的利器——小数 « 张鑫旭-鑫空间...

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=252

写在前面的唠叨

说到解决兼容性问题，不得不提一下css hack，曾几何时我以会使用几个hack沾沾自喜，后来发现自己真是个vip级别的蠢蛋，会用几个hack只是中级阶段，真正厉害的人要以没有hack同样可以实现复杂页面的兼容性，这才叫厉害。所以后来，苦心研究如何无hack实现各个浏览器兼容性俱佳，最核心的就是布局方式，宜采用流动性布局，亦称自适应布局，我自己总结为三无原则：无浮动，无高度，无宽度。神似于武侠里的无招胜有招，忘记招式才是最高境界一样的道理。好，这个内容很大，洋洋洒洒几万字都说不尽，作罢。我这里就仅仅讲一讲一个可能很多人都没有注意到的浏览器之间的差异，并且如何利用这种差异解决浏览器之间的兼容性问题，这可是个很妙的东西哦，其精神内涵与砒霜治白血病是一致的。

浏览器对于含小数值px（像素）解析的差异

想必很少有人用小数值作为像素值吧。因为像素就是最小的单位了，要么1，2，3，要么就是0，没有什么小数一说的，表现上也不可能存在小数的。确实，很正确，但今天我就是颗螺丝——卯上了，我就要用小数值，怎么样！好，我们一起来看看结果。见下面的对比图：
上面一行是11.9像素大小的文字，下面一行是11.4像素大小的文字，看看各个浏览器下都表现得怎么样：

IE6浏览器下（IE下与此表现一致，避免重复，IE7下图略）

Firefox浏览器下

chrome浏览器下（Safari同内核，同表现）

下面说正题，想必很多做前端的都知道，中文字体规规矩矩显示的下限像素值就是12像素，小于12像素，中文就会有些挤作一团，美感大降。对比上面的图，仔细看，您就会发现，当文字大小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像素（已测试）。由于平时很少有人用小数值，所以这种差异很少有人注意，所以很少有人关注。然而这个不起眼的浏览器差异有时候却是解决一些兼容性问题的绝妙武器。

补充于2010-07-15
IE8浏览器下对于小数的解析与Firefox，Chrome等浏览器一致。

利用小数解析差异解决浏览器兼容性问题

好，现在我们需要一个存在的兼容性问题。例如，淘宝首页css代码里面有这么一段hack，见下图（图对应淘宝网首页上部搜索选项卡样式）：

淘宝首页css一段hack

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