Mozilla 5.0系 CSSバグリスト

折り返しを抑制した要素内にあるhr要素の幅が正しく算出されない(N7.0/Moz1.4a)

• 2003-05-20修正。回避法のためにWinIEでバグが発生する点について追加。
• 2003-05-26修正。同じような症状を持つバグについての補足を追加。
• 2003-05-30修正。間違ったリンクの修正。

症状

• 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要素はどちらも親要素の幅に合わせた長さの水平線として表示されるはずです。

スクリーンショット

補足

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では以下の項目が該当します。

• Bugzilla Bug 60992：<hr> Draws incorrectly if it is in a block with NOWRAP (Quirks Mode Only)

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

修正状況

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