IE6でリストの背景色が次の行に被ってしまう

XMLのツリー構造をHTMLのリストに変換する際、機械的に
<ul>
　<li>～
　　<ul>
　　　～
　　</ul>
　</li>
</ul>
のような感じで入れ子にしていたのですが、<li>要素に背景色を指定した場合、子の<ul>要素の中身が空だと、直接の関係の無い次の行まで背景色が被ってしまう、という現象がIE6で発生することに気がつきました。

ちなみに子要素が<ul>でなく、<div>で中身が空の場合も同様

実際の表示サンプルは→こちら

最初は記事に貼り付けていたのですが、なぜかIE6だと輪をかけて表示がおかしくなるので(スクロールさせないと色が付かない、とか……何故？)

A. 空の子リストを持つ場合

［HTML］

<ul>
<li style="background-color:yellow;">1.【背景:黄・子:(－)】<ul></ul></li>
<li>2.【背景:(－)・子:(－)】<ul></ul></li>
<li>3.【背景:(－)・子:(有)】<ul><li style="background-color:lime;">3-1. 【背景:緑・子:(－)】<ul></ul></li></ul></li>
<li>4.【背景:(－)・子:(－)】<ul></ul></li>
</ul>

IE6だと、2.と4.に、それぞれ1.・3-1.の背景色が被って見えます（Firefoxだと問題無し）

対策としては、子ノードが無い場合には<ul>要素自体も作成しない、というのが一番ですが、空の要素を用意しておき、後からダイナミックに中身を追加する、というような使い方をしたい場合もあります。

要は、要素が空なのが原因なので、中身のある要素をダミーで追加してやれば改善されそうです。
下記は、半角空白の入った行高0のダミーブロック(<div>)を機械的に追加した例です。

B. 子リストの後にダミーブロックを挿入した場合

［HTML］

<ul>
<li style="background-color:yellow;">1.【背景:黄・子:(－)】<ul></ul><div style="line-height:0px;">&nbsp;</div></li>
<li>2.【背景:(－)・子:(－)】<ul></ul><div style="line-height:0px;">&nbsp;</div></li>
<li>3.【背景:(－)・子:(有)】<ul><li style="background-color:lime;">3-1. 【背景:緑・子:(－)】<ul></ul><div style="line-height:0px;">&nbsp;</div></li></ul><div style="line-height:0px;">&nbsp;</div></li>
<li>4.【背景:(－)・子:(－)】<ul></ul><div style="line-height:0px;">&nbsp;</div></li>
</ul>

当然ながら、データ転送量が増えてしまうため、ケースバイケースで

というか、IE6が改修されるのが一番ですけどね(苦笑)

ツイート