« 複数のプログラム言語 | トップページ | カカオ分99%のビターチョコ »

2006/06/01

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が改修されるのが一番ですけどね(苦笑)

« 複数のプログラム言語 | トップページ | カカオ分99%のビターチョコ »

パソコン・インターネット」カテゴリの記事

覚書」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: IE6でリストの背景色が次の行に被ってしまう:

« 複数のプログラム言語 | トップページ | カカオ分99%のビターチョコ »

戻るリンク追加

カレンダー

2020年3月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

ココログカレンダーPlus(旧2)

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

コメントリストツリー化

無料ブログはココログ