ブラウザのうまくない CSS レンダリング - その 1 (line-height)

固定テキストをページのフッタとして表示している "position:absolute;bottom:0;" の div 要素に内容を追加して 2行したので、style に "line-height:120%;" を追加したところ、画面からはみでてスクロールバーが。。。

検証用コンテンツ

iframe

メイリオだと line-height:120% で。。。

iframe

verdana だと line-height:120% は問題ないけれど、

iframe

line-height:100% で。。。

iframe

MS P Gothic だと line-height:100% でも大丈夫。

確認

• Microsoft Windows XP Professional Version 2002 Service Pack 3
• Firefox version 3.6.9

Internet Explorer 7 で確認したら、画面からはみ出ないけれど、フォントの上側の一部が表示されないことがあるので、どちらにしても "position:absolute;bottom:0;" と "line-height:xxx" の組み合わせは注意。