折り返しを抑制した要素内にあるhr要素の幅が正しく算出されない

症状

  • white-space: nowrap; (またはnowrap属性)で折り返しを抑制したtd要素内で、hr要素の水平線の長さが非常に短くなる。また、widthプロパティの指定を無視する。
  • white-space: nowrap; で折り返しを抑制したブロック要素内で、hr要素のwidthプロパティを%値で指定すると親要素の幅ではなくbody要素の幅に対する%値を算出する。

例示

<style type="text/css">
hr {
  background: red;
  color: red;
}
</style>

<table border="2" style="width:5em;">
<tr>
<td style="white-space:nowrap;"><hr></td>
</tr>
</table>

<div style="white-space:nowrap; width:5em; border:2px solid blue;">
<hr>
</div>


td要素とdiv要素の内部にあるhr要素はどちらも親要素の幅に合わせた長さの水平線として表示されるはずです。

スクリーンショット

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

N7N7.02での表示(互換モード)

補足

hr要素に対して display: block; を指定することでこのバグを回避できます。ただし、この指定のためにWinIEで別のバグが発生することがあります。

<table border="2" style="width:5em;">
<tr>
<td style="white-space:nowrap;"><hr style="display:block;"></td>
</tr>
</table>

<div style="white-space:nowrap; width:5em; border:2px solid blue;">
<hr style="display:block;">
</div>


Mozilla.org Bugzillaでは以下の項目が該当します。

このバグと同じような症状を持つ別のバグがありますがMozバグ053Mozバグ054、このバグとは回避法が異なります。heightプロパティを指定してもこのバグは回避できません。

修正状況

  • N7.02互換モード、Moz1.4a互換モードで不具合の発生が確認されました。
  • N7.02標準モード、Moz1.4a標準モードでこの不具合は発生しません。

スポンサーリンク

関連記事

スポンサーリンク

Viewの表示・非表示を切り替える方法

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

上に戻る