IE6に出る不具合

質問

お世話になっております。
角に丸みを持たせたボーダー（罫線）を作っているのですが、IE7、IE8、FireFoxでは描いたとおりの表示となったのですが、IE6だけ、4pxほどの隙間が出来てしまいます。

CSS側
.main-border-top{
width:660px;
height: 8px;
float: right;
background-image: url(http://localhost/public_html/type2/image/border-line-660-top.gif);
/*この画像は、ボックスの蓋？になる左右が回り込んだ形状の画像です。660×8の大きさ*/
background-repeat: no-repeat;
margin-bottom: 0px;
padding-bottom: 0px;
}

.main-border{
margin-top: 0px;
padding-top: 0px;
width:658px;
border-left: 1px solid #969696;
border-right: 1px solid #969696;
float: right;
text-align:left;
}

.main-border-bottom{
width:660px;
height: 8px;
float: right;
margin-bottom: 20px;
background-image: url(http://localhost/public_html/type2/image/border-line-660-bottom.gif);
/*この画像は、ボックスの底？になる受け皿状の画像です。660×8の大きさ*/
background-repeat: no-repeat;
}

html側
<div class="main-border-top">
</div>
<div class="main-border">
<!--ボーダー内ここから-->
<p><b>お知らせ</b></p>
<p>ホームページリニューアル・ホームページリニューアル・ホームページリニューアル・ホームページ</p>
<p>テスト・テスト・テスト・テスト・テスト・テスト・テスト</p>
<!--ボーダー内ここまで-->
</div>
<div class="main-border-bottom">
</div>

言葉だけでうまく説明できないので、画像も添付しますが、画像の通り、上の蓋の下に隙間が出来てしまい、高さは8pxと指定しているにもかかわらず14pxの幅（高さ）を占領しており、画像との差、6pxの幅の隙間が出来てる状況です。
お忙しい中恐縮ですが、アドバイスのほど宜しくお願いいたします。

回答No.1

hogenyam · ベストアンサー

font-size:0;
を
.main-border-topに入れてみては？

お礼

はじめまして、こんばんは。
早速のアドバイスをありがとう御座います！

で、アドバイスのもと正常に表示させることが出来ました！
font-size:0;　これって、よく利用するものなのでしょうか？本などを見ても解決できずにいたので有り難い次第です。
ありがとう御座いました！