Difference between IE and Firefox when using percent as font-size unit

今天在测试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之间不同的地方。

 

 

trackback: http://www.codesoil.net/2007/05/26/difference-between-ie-and-firefox-when-using-percent-as-font-size-unit/