livedoor ナレッジ

ボックスのライン背景画像がIE以外で表示されません

CSSを使用してボックスを作りました。
ヘッドになる部分、ボディ部分背景、ボトムになる部分の3つの画像を作り、ボディ部分は長さ可変にしたいと思っています。

CSSを
#newsbox_top{
display:block;
width:550px;
height:60px;
background:url(../img/news_head.jpg) no-repeat;
padding:0;
margin:30px 0 0 0;
text-indent:-9999px;
}

#newsbox_contents{
clear:both;
width:550px;
background:url(../img/news_line.jpg) repeat-y;
}

#newsbox_bottom{
clear:both;
display:block;
width:550px;
height:15px;
background:url(../img/news_bottom.jpg) no-repeat;
padding:0;
margin:0;
text-indent:-9999px;
}

#newsbox_contents ul{
padding:0;
margin:0;
list-style: none;
}
#newsbox_contents li{
float:left;
}

li.newsdate{
width:70px;
padding:0;
margin:0 0 0 10px;
vertical-align:top;
}

li.newsdetail{
padding:0 0 0 10px;
margin:0;
}

hr.newsline{
width:530px;
height:1px;
color:#e9e5e5;
background-color:#e9e5e5;
border:none;
margin:5px 10px;
}
とし、htmlを
<div id="newsbox_top">NEWS</div>
<div id="newsbox_contents">
<ul>
<li class="newsdate">2007/10/23</li>
<li class="newsdetail">ニュース詳細</li>
<li><hr class="newsline" /></li>
</ul>
</div>
<div id="newsbox_bottom">NEWS</div>
としました。

WINのIEではnewsbox_contentsの画像がきちんと反映されるのですが、それ以外のブラウザだと画像が反映されません。

どこに問題があるのか検討がつかず困っております。
どなたかアドバイスお願い致します。

リストを横に並べるためのfloat指定でしょうか？

その次の要素newsbox_bottomにclear:both指定があるのは良いのですが、
floatは基本的に親要素の枠を超えて有効にするため、
float指定のある子要素の上端まで親要素の下端が縮まってしまいます。

その結果、今回のケースでは親要素の高さがゼロになって、
背景画像が消える結果につながっています。

これだけ見るとIEの方が使いやすいと思われるかもしれませんが、
CSSの解釈は他のブラウザが正解です。


これを回避するには親要素を閉じる前（</div>の上）に

<br clear="left" />

を入れてください。

もしくは、CSSハックにこだわるなら、
IE用にはnewsbox_contentsを以下のように指定を少し追加して、

#newsbox_contents{
width:550px;
background:url(../img/news_line.jpg) repeat-y;
display:inline-table;
min-height:0;
}

（注、親要素のスタイルで子要素の回り込み解除はできないです。
従って、newsbox_contentsでのclear:bothは省きました）

IE以外のブラウザ用には擬似要素afterを使って
CSSハックで回り込み解除のコンテンツを追加すると良いです。

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