IE6で外部リンク画像の下に隙間

質問

IETesterの6で確認していたところ、
外部スタイルシートの画像の下に隙間（10px程）ができてしまいます。
Firefox、IE8、IE7ではこの現象は見られませんでした。

以下記述となります。
/* HTML */
<div id="bg_top01"></div>
<div id="contents_box01">あああ</div>
<div id="bg_btm01"></div>

/* CSS */
#bg_top01 {
background:url(../img/bg_top.gif) no-repeat;
width:760px;
height:6px;
}
#contents_box01 {
background-color:#2F4473;
width:716px;
padding:0 22px;
}
#bg_btm01 {
background:url(../img/bg_btm.gif) no-repeat;
width:760px;
height:6px;
}

隙間ができるのはbg_top01の下だけです。
他のサイトで「vertical-align: bottom」を入れると直るあったので、入れてみたんですが変わりませんでした。
隙間をなくすのに他に方法がありますでしょうか？
ご助言をお願いいたします。

回答No.1

Java-Java · ベストアンサー

それはIE6のバグですね。

「overflow: hidden;」か「font-size: 0;」を追加してやれば解決できます。
個人的にオススメなのは「overflow: hidden;」です。

ちなみに「vertical-align: bottom」で解決できるのはimgのすきまの場合です。

参考URL：

http://www.dave-woods.co.uk/?p=143

お礼

ご回答ありがとうございます。

overflow: hidden;
で直りました。
今後も使えそうです。
ありがとうございました。