line-heightが指定された要素内でvertical-alignの%値指定が正しく反映されない

症状

line-heightプロパティが指定された要素の子孫にvertical-alignプロパティを%値で指定した要素が含まれていると、その要素を含む行の配置が乱れる。

例示

<p style="line-height:1.1;">1行目です。<br>
2行目です。<sup style="vertical-align:55%;">*1</sup><br>
3行目です。</p>

1行目です。
2行目です。*1
3行目です。

2行目のsup要素が表示される位置を%値で調節しています。

スクリーンショット

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

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

補足

vertical-alignプロパティを%以外の単位(emなど)で指定すればこの不具合を回避できます。

<p style="line-height:1.1;">1行目です。<br>
2行目です。<sup style="vertical-align:0.55em;">*1</sup><br>
3行目です。</p>

1行目です。
2行目です。*1
3行目です。

修正状況

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

スポンサーリンク

関連記事

スポンサーリンク

+単項演算子 正号

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

上に戻る