hrでFirefoxをだます

入れ子の領域がちゃんとFirefoxで認識されない場合の解決方法。

<div id="main">
  <div id="left">
  ....
  </div>
  <div id="right">
  ....
  </div>
</div>

とある場合、mainの領域はleftとrightを包含したものを期待しているのだが、Firefoxではそうなってくれない。

<style type="text/css">
hr {
	clear: left;
	visibility: hidden;
	height: 0px;
	margin: 0px;
	padding: 0px;
	border: none;
}
</style>
....
<div id="main">
  <div id="left">
  ....
  </div>
  <div id="right">
  ....
  </div>
  <hr />
</div>

とhrを入れておくことで解決するようだ。