刚刚发现了百分比(%)在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>

Firefox
Firefox下的结果

Internet Explorer
IE下的结果

看了这些结果,我真的不明白了:到底font-size单位中的百分比和em是否相同?

此外,有一点让我安心的就是,如果使用em作为单位的话,就没有上一篇文章中提到的,IE和Firefox中大小不一致的现象了。