line-heightで算出した行高を超える部分が表示されない

症状

line-heightプロパティに小さい値を指定することで行高を低くしているとき、行高の算出値の範囲を超える部分が表示されず、文字が欠けてしまう。

例示

<table border="1">
<tr style="font:2em Arial,sans-serif; line-height:0.5;">
<td>ijqgvylT</td></tr>
</table>
ijqgvylT

tr要素は行高さを文字高さの半分にしています。

スクリーンショット

Moz1.3Moz1.3での表示(標準モード)

WinIE6WinIE6.0での表示(標準モード)

補足

widthプロパティで幅を指定した要素の場合、行高の範囲を超える部分が上下両方とも消えます。

<p style="line-height:0.5em; font-size:2em; width:5em; background:aqua;">
AgTj</p>
<p style="line-height:0.5em; font-size:2em; background:lime;">
AgTj</p>

AgTj

AgTj

td要素など一部の要素を除き、widthプロパティを指定しないことでこのバグを回避できます。ただし、WinIE6.0標準モードでは下にはみ出る部分だけが表示されないために完全には回避できないことがあります。

修正状況

WinIE5.5、WinIE6.0標準モード、WinIE6.0互換モードで不具合の発生が確認されました。

WinIE7でも発生します。

スポンサーリンク

関連記事

スポンサーリンク

getElementsByTagName

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る