hr要素に指定した下マージンが親要素の下マージンとして反映される

症状

hr要素に display:block; と任意の下マージンを指定したとき、そのhr要素を最後部に内包する親要素の下マージンがhr要素に指定した下マージンと同じ値になる。

例示

<div style="margin:0; border:2px solid red;">
<hr style="display:block; margin-bottom:1em;">
</div>
<div style="margin:0; border:2px solid blue;">↑</div>

hr要素に1emの下マージンを設定しています。また、div要素のマージンは0にしています。

スクリーンショット

N7N7.02での表示(標準モード)

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

補足

バグを回避する方法がいくつかあります。

  • hr要素への display:block; 指定をやめる(ただし、Gecko系UAで別のバグ(『互換モードではhr要素に指定したclearプロパティが無視される』『折り返しを抑制した要素内にあるhr要素の幅が正しく算出されない』)が発生することがある)。
  • 親ブロックに任意の(auto以外の)widthかheightを指定する。
    <div style="margin:0; border:2px solid red; width:100%;">
    <hr style="display:block; margin-bottom:1em;">
    </div>
    <div style="margin:0; border:2px solid blue;">↑</div>
  • hrをブロック内の最下部にしない。つまりhrの次に何か書き入れる。
    <div style="margin:0; border:2px solid red;">
    <hr style="display:block; margin-bottom:1em;">
    </div>
    <div style="margin:0; border:2px solid blue;">↑</div>
  • hrへのmargin-bottom指定値を0かautoにする。
    <div style="margin:0; border:2px solid red;">
    <hr style="display:block; margin-bottom:0;">
    </div>
    <div style="margin:0; border:2px solid blue;">↑</div>

修正状況

WinIE5.5、WinIE6.0標準モード、WinIE6.0互換モードで不具合の発生が確認されました。

WinIE7でも発生します。

スポンサーリンク

関連記事

スポンサーリンク

factor 素因数分解をする

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

上に戻る