フォント100.01％指定でフォントサイズの継承問題を解決

下記のような入れ子状態でフォントサイズをemで指定した場合、IEでフォントサイズ継承の問題がでます。この問題というのはIEのブラウザで文字のサイズを変えるとそれぞれ文字のサイズが違ってくるんです。下記サンプルページで試してみてください。

 
<p>B
    <span style="font-size:1em;">I
    <span style="font-size:1em;">B
    <span style="font-size:1em;">O
    </span></span></span>
</p>
 

→継承問題のサンプルページ

回避方法

これを回避するにはbody要素にfont-size: 100.01％を指定します。

 
body {
    font-size: 100.01%;
}
 

→100.01％指定のサンプルページ

何故、100.01％なのか？

• ・101％だとSafariで問題がでる（具体的にはわかりませんが）
• ・100％だとOperaの昔のいくつかのバージョンで子孫要素の文字サイズが小さくなる。

という訳で100.01％だそうです。