IE与其他浏览器关于小数点px的差异

写在前面的唠叨

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

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

上面一行是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等浏览器一致。

 

 

转载于：浏览器对于含小数值px(像素)解析的差异及小数值如何解决兼容性问题