今天在测试IE7和firefox下blog的字体显示时,发现在某些特定的font-size下,IE和firefox所显示的字体大小并不相同。
这里要提前说明的是,我所遇到的问题是在如下环境下发生的:
- 所测试的字体为宋体 (Simsun)以及目前最时髦的微软雅黑 (Yahei)。测试结果表明,这个问题无论是在宋体还是在微软雅黑都会发生
- IE版本为IE6或IE7,firefox为2.0.0.3
- CSS当然是使用em体系,也即百分比单位、或者em单位的font-size (这年头应该很少有人用px来定义文档字体了吧?)
- Firefox的默认字体大小设置为16px,IE无法设定默认字体(中等大小时)大小(如果哪位知道如何更改默认字体大小,还请告诉我),据有关文档称也是16px。
为了找出问题的根本原因,我写了一段php代码用来输出font-size等于100% (也即1em) 到 50% (0.5em)之间的每隔1% (0.01em)的文字显示结果。该程序的运行结果如下图所示。
上图是在Firefox下的测试结果。然后,根据IE和Firefox下的结果,得出了右面的这张表格。
通过这张表格即可看出,虽然在大多数的的情况下IE和Firefox的结果是相同的,但是当设置font-size=97%的时候,IE会显示 16px的字体,而Firefox则显示15px的字体。同样font-size=72%时,IE显示12px字体,Firefox则显示11px字体。
实际用计算器计算一下就知道,当font-size为97%时,16px X 97% = 15.52px。也就是说,在IE中15.52px被解释为16px字体,而在Firefox当中15.52px被解释为15px字体 (不知道是不是Firefox的计算方法有问题?或者是W3C规定这样做的?还是我计算错误?)。
补充一条最新发现:刚才试着用CSSViewer这个插件检查了一下font-size=97%时的像素值,发现结果并不是我想象的15.52px,而是15.4667px——不知道Firefox中究竟是按照什么标准计算百分比单位的font-size的呢?
IE和Firefox究竟谁对谁错,实在是难以说清,不过有一点是肯定的——就是在设计CSS的时候,要特别注意这些IE和Firefox之间不同的地方。