Posts tagged css
Difference between em and percent font-size in Firefox
May 26, 2007
刚刚发现了百分比(%)在IE和在Firefox中的表现并不相同，现在居然发现即便是在Firefox内部，em和%的表现也并不一样。
首先先要讨论一下，作为font-size等CSS属性的单位，78%和0.78em到底是否相同？
遗憾的是，我并不是CSS专家，所以我没法回答按照标准这两个单位是否完全相同。但是，根据某些权威网站的说明，
Both em and % are relative measures. The difference is what each is relative to. Em is always relative to font size. % is relative to the containing block, usually the body, a div, or a table, unless applied to font-size, in which case it applies to the parent font-size.
也就是说，在用于font-size的时候，两者的涵义应该是相同的。但是，当我用下面在Firefox (ver 2.0.0.3, 默认字体微软雅黑16px)上显示如下HTML片段时，却出现了令我不解的结果：
<body style="font-size:100%">
<span style="font-size:0.97em">这个测试用来比较不同字体单位下的表示情况。[0.97em]</span><br/>
<span style="font-size:97%">这个测试用来比较不同字体单位下的表示情况。[97%]</span><br/>
</body>
<span style="font-size:0.97em">这个测试用来比较不同字体单位下的表示情况。[0.97em]</span><br/>
<span style="font-size:97%">这个测试用来比较不同字体单位下的表示情况。[97%]</span><br/>
</body>
Firefox下的结果
IE下的结果
看了这些结果，我真的不明白了：到底font-size单位中的百分比和em是否相同？
此外，有一点让我安心的就是，如果使用em作为单位的话，就没有上一篇文章中提到的，IE和Firefox中大小不一致的现象了。
Difference between IE and Firefox when using percent as font-size unit
May 26, 2007
| font-size | IE6/IE7 | Firefox |
|---|---|---|
| 100% | 16px | 16px |
| 99% | ||
| 98% | ||
| 97% | 15px | |
| 96% | 15px | |
| 95% | ||
| 94% | ||
| 93% | ||
| 92% | ||
| 91% | ||
| 90% | 14px | 14px |
| 89% | ||
| 88% | ||
| 87% | ||
| 86% | ||
| 85% | ||
| 84% | 13px | 13px |
| 83% | ||
| 82% | ||
| 81% | ||
| 80% | ||
| 79% | ||
| 78% | 12px | 12px |
| 77% | ||
| 76% | ||
| 75% | ||
| 74% | ||
| 73% | ||
| 72% | 11px | |
| 71% | 11px | |
| 70% | ||
| 69% | ||
| 68% | ||
| 67% | ||
| 66% |
今天在测试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之间不同的地方。