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

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

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

Category: Mozilla, Netscape, Windows
Tag: hr, width

例示

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

スクリーンショット

WinIE6 WinIE6.0での表示（互換モード）

N7.02での表示（互換モード）

補足

hr要素に対して display: block; を指定することでこのバグを回避できます。ただし、この指定のために【hr要素に指定した下マージンが親要素の下マージンとして反映される】が発生することがあります。

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