line-heightで発生する古いブラウザでの問題点
もはや気にしなくても構わないほど古いブラウザでの話ですが、念のために紹介しておきます。
line-heightプロパティを使うと、Internet Explorer 3 と Netscape Navigator 4 で問題が起こります。
■単位がないと「px」だと誤解するIE3
IE3は、単位のない数値を「単位pxが省略された値」だと誤解してしまいます。 その結果、
line-height: 1.4;
を
line-height: 1.4px;
だと解釈してしまうので、困ったことになります。行の高さが1.4ピクセルしかなければ、何も読めないでしょう。
ただ、今さらIE3での表示結果など気にしなくて構わないでしょう。 気になる場合でも、IE3にはスタイルシートを読ませないようにするだけで十分です。
■画像が文字の上に重なってしまう Netscape4
Netscape Navigator 4には、画像が含まれるボックスに対して line-heightプロパティを適用させると、 画像が文字の上に重なってしまうバグがあります。（文字が読めなくなります。）
ですから、Netscape4での表示を気にするなら（少なくともline-heightプロパティを使っている部分の） スタイルシートを読まないように記述する必要があります。
おわりに
今回は、行間を調節するために使うline-heightプロパティの値には、「単位のない数値」を指定した方が良いことをご紹介致しました。
もし、「1.4em」などの単位付きで記述したり「140%」などの割合で記述している場合は、単位なしの数値に修正しておくことをお勧め致します。
【関連記事】
