Internet Explorer (Windows) CSSバグリスト

hr要素に指定した下マージンが親要素の下マージンとして反映される(5.x/6.0)

症状

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にしています。

スクリーンショット

補足

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

• hr要素への display:block; 指定をやめる（ただし、Gecko系UAで別のバグ（Mozバグ042、Mozバグ053）が発生することがある）。
• 親ブロックに任意の（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互換モードで不具合の発生が確認されました。