Firefoxでdivとdivの画像間に、隙間(空白・スペース)が出来てしまうのを解決する。

なんかFireFox5？ぐらいから、こんな現象にぶち当たることがちょいちょいあります。

<div id="content-body">
  ほげほげ
  ほげほげ
  ほげほげ
  ほげほげ
</div>

<div id="content-bottom"></div>

#content-body {
    background: url("../img/main_body.gif") repeat-y scroll 0 0 transparent;
}

#content-bottom {
    background: url("../img/main_bottom.gif") no-repeat scroll 0 0 transparent;
}

こういった形でdivで囲われた画像が上下に並ぶと、IE6やchromeでは大丈夫なのに、FireFox6だと画像の間に隙間が空いてしまう場合があります。そんな時の解決方法。

#content-body:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}

:afterはそのクラスの直後で動作する、擬似要素だとかなんとか。ハック臭い解決方法になってしまいますが、一応メモメモ。

参考:CSS の after 擬似要素で回り込みを解除する: 小粋空間

※そもそもこの例では、div入れ子にしとけって話はスルー。例が悪くて申し訳ないです。

<div id="content-body">
  <div id="content-bottom">
    ほげほげ
    ほげほげ
    ほげほげ
    ほげほげ
  </div>
</div>