互換モードではhr要素に指定したclearプロパティが無視される

補足

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

  <div style="float:left; width:100px; height:20px; background:blue; margin:1px;"></div>
  <hr style="clear:both; display:block;" />
  <div style="float:left; width:100px; height:20px; background:red; margin:1px;"></div>

  実際の表示については検証ページ2 (互換モード)をご覧ください。

• Bugzilla-jpの関連項目です。

  • DOCTYPE宣言によって水平線（hr）へのclear指定が効かなくなる

• 互換モードでhr要素はインライン要素として扱われているのでclearプロパティの指定は無効になります。一方、標準モードでhr要素はブロック要素として扱われます。以下の理由からこのような違いが設定されているそうです。

  • WinIEやNN4.xなどではhr要素をブロック要素として扱っている。また、hr要素の罫線はボーダーである。
  • フロートの後にclearプロパティがnone値のブロック要素があるとき、この要素のボーダーはフロートが存在しないものと考えて設置しなければならない。
  • しかし、慣習としてhr要素の罫線（＝ボーダー）はフロートを避けるように表示されてきた。hr要素がブロック要素であるのなら、このような振る舞いはCSS2の規定に違反していることになる。
  • このため実験として、互換モードではhr要素をインライン要素にした。インライン要素であれば罫線がフロートを避けるのはCSS2に準拠した振る舞いになる。

  このような経緯から、互換モードではhr要素に対して以下のようなスタイルがデフォルトで設定されています（「resource:///res/quirk.css」から抜粋）。これにより互換モードでhr要素は、前後に（br要素相当の）改行が置かれたインライン要素として扱われます。

  hr {
    display: inline;
    -moz-box-sizing: border-box;
    margin: 0 0.1% 0 0.1%; /* Mmm! Hack-on-a-hack for bug 81776 */
    font-size: -moz-initial !important;
  }
  hr:before {
    white-space: pre;
    content: "?A";
  }
  hr:after {
    white-space: pre;
    content: "?A";
  }

  詳しくはMozilla.org Bugzilla Bug 18754を参照してください。