line-heightが指定された相対配置要素の上ボーダー上端が消える

症状

子孫に置換要素以外のインライン要素だけを含む相対配置のブロック要素にline-heightプロパティが指定されているとき(または、親要素から継承しているとき)に、上ボーダーの上端が消えてしまう。

例示

<div style="line-height:1.2; position:relative; border:1px solid red;">A</div>
A

四方のボーダーの太さはいずれも1pxです。

スクリーンショット

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

WinIE6WinIE6.0での表示(互換モード)

補足

相対配置する要素の子孫にブロック要素や置換要素を置くようにすれば不具合を回避できます。

<div style="line-height:1.2; position:relative; border:1px solid red;">
<p>A</p>
</div>

A

修正状況

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

WinIE7でも発生します。

スポンサーリンク

関連記事

スポンサーリンク

BRタグが<br />と書ける理由 『<br> が <br /』で『</br> が >』になる

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

上に戻る