em単位で指定した値が文字サイズ変更後に正しく反映されない

メニューの［表示→文字のサイズ］で文字サイズを変更すると、変更後にem単位で指定されたマージンなどが変更後の文字高さを正しく反映していない。

こちらのページに例があります。

Moz1.0-100％ Moz1.0で文字サイズ100％での表示

Moz1.0-75％ Moz1.0で文字サイズ75％での表示

WinIE6.0-中 WinIE6.0で文字サイズ「中」での表示

WinIE6.0-最小 WinIE6.0で文字サイズ「最小」での表示

font-sizeプロパティをem単位やex単位で指定した要素がネスト状態にあるとき、文字サイズを変更すると文字の大きさがばらばらになることがあります。例えば以下の例では文字サイズが「中」以外の場合、4つの文字のフォントサイズがすべて異なります。

<p>A
<span style="font-size:1em;">B
<span style="font-size:1em;">C
<span style="font-size:1em;">D
</span></span></span></p>

ABCD

文字サイズが「中」の場合のフォントサイズは A=B=C=D ですが、「大」や「最大」でのフォントサイズは A<B<C<D に、「小」や「最小」では A>B>C>D になってしまいます。

なお、祖先要素でfont-sizeプロパティを%値や絶対単位の値で指定することで不具合を回避できます。

WinIE6.0では標準・互換モードともに不具合の発生が確認されました。

関連記事