vertical-alignが指定された要素を含む行が前後の行に重なる

症状

親要素のline-heightプロパティで指定した高さの範囲から上か下にはみ出るvertical-alignプロパティを指定した子孫要素を含む行が前の行または次の行に重なって表示される。

例示

<p style="line-height:1;">あいうえお<br>
かき<strong style="vertical-align:0.5em;">く</strong>けこ<br>
さしすせそ</p>

あいうえお
かきけこ
さしすせそ

strong要素を0.5em分だけ上方向にずらしています。strong要素を含む行は前後の行と重ならないように行の高さが広がるはずです。

スクリーンショット

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

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

補足

親要素のline-heightプロパティを充分大きな値にするとこのバグを回避できます。

<p style="line-height:1.5;">あいうえお<br>
かき<strong style="vertical-align:0.5em;">く</strong>けこ<br>
さしすせそ</p>

あいうえお
かきけこ
さしすせそ

修正状況

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

WinIE7でも発生します。

スポンサーリンク

関連記事

スポンサーリンク

<=演算子 より小さい

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

上に戻る