スタイルシート裏の裏

第5章 IE5.5とNetscape6のCSS


5-4.リスト(UL,OL,DL要素など)

文字色

リストには、UL要素、OL要素、DL要素があり、それぞれの項目に、LI要素(UL要素、OL要素)やDT、DD要素(DL要素)を使います。

さて、次のような定義を適用する場合について調べてみました。背景色についても評価を付け加えました(2000.4.14)。

ul,ol,dl { color : red  ; background : yellow }
li,dt,dd { color : blue ; background : pink   }
<ul>  <li>UL要素  <li>前にドットがつきます  </ul>

<ol>  <li>OL要素  <li>前に数字がつきます  </ol>

<dl>  <dt>DL要素の中のDT要素  <dd>同じくDD要素  </dl>

実際の見栄えを、画像ファイルで表示して比較してみます。チェックページ

list-IE5.01 ie5.5 list-NC4.7 list-Netscape 6

この結果を表にしてみました

Netscape 6の見栄えはIEとほぼ同じですが、背景色への適用に若干違いがありました。

リストに対する文字色と背景色の実装状況比較
定義した要素IE4.0〜IE5.5NN4.0〜NC4.7Netscape 6

文字色背景色文字色背景色文字色背景色
UL×××
OL×××
DL××
LI
DT××
DD××

ボーダー

リスト関係の全ての要素にボーダーを定義してみます。

li,dt,dd { color : blue ; border:2px green  solid; background : yellow}
ul,ol,dl { color : red  ; border:2px purple solid; background : pink  }

NN4.0〜NC4.7では困りますが、IE5.01とNetscape6のどちらが正しい適用なのかは判断に困りますね。チェックページ

list2-ie5.01 ie5.5 list2-nc4.7 list2-n6

やはり、NC4.7が廃れるまでには時間がかかるでしょうから、リスト関連の要素にはボーダーを定義しないほうがよさそうです。


パディング

特に適用したいとは思っていませんが、Netscape6では下手に適用すると「・」や「数字」が消えてしまうことが発生しました。PR1のバグだと思いますが、参考に掲載しておきます。

li,dt,dd { color : blue ; border:2px green  solid; background : yellow;  padding : 0.5em ;}
ul,ol,dl { color : red  ; border:2px purple solid; background : pink  ;  padding : 0.5em ;}

パディングは、IE5.01ではUL、OL、DLには適用されませんでしたが、IE5.5及びNetscape6では適用するようです。ただ、Netscape6でパディングを1em以下にすると・や数字がウインドーの外側に出て行ってしまうので注意が必要です。(最初は、まったく表示しないものだと勘違いしてましたが、ただ単に見えなかっただけのようです。)

チェックページ

list3-ie5.01 ie5.5 list3-n6

n6-Indexに戻る ==== 前のページへ ==== 次のページへ