list-style:CSS リセットでなし

著者：Eve Cole 更新時間：2010-05-22 15:52:43

調べてみると、私はかつて職場で UL リストの異常な動作に遭遇したことがありました。
さらに、昨日http://bbs.blueidea.com/thread-2984871-1-1.htmlの投稿を見たので、list-style のさまざまな属性をテストしたところ、興味深い現象を発見しました。

まずはCSSマニュアルのlist-styleの説明を見てみましょう。

定義と使用法
list-style 省略表現属性は、すべてのリストプロパティを 1 つの宣言で設定します。

説明する
このプロパティは、他のすべてのリストスタイルプロパティをカバーする省略形のプロパティです。 list-item 表示ではすべての要素に適用されるため、通常の HTML や XHTML では li 要素でしか使用できませんが、実際にはどの要素にも適用でき、list-item 要素に継承されます。
次のプロパティを順番に設定できます。
•リストスタイルタイプ
•リストスタイルの位置
•リストスタイル画像
たとえば、「list-style:circle inside;」などの値を設定する必要はありません。設定されていないプロパティには、デフォルト値が使用されます。
デフォルト値: ディスク外側なし

日常の作業では、リストのシンボルを非表示にするために ul と li で css リセットを実行する必要があることがよくあります。
最も一般的に使用される書き方は Ul,li,ol{list-style:none;} です (ul,li,ol{list-style-type:none;} を使用する人もいます)。

このページはIE6、7、8、FFでも問題ありません。

しかし無視できないのは、 list-style: には次の 3 つの属性が含まれていることです。

リストスタイルタイプ
リストスタイルの位置
リストスタイルイメージ

これら 3 つの属性に注意しないと、リスト形式で問題が発生することがあります。

たとえば、IE6 の二重マージン問題を解決するために ul がフローティングになった後、display:inline を必要とする場合、何か奇妙なことが起こります。

.ul01{フロート:左;表示:インライン;}
.ul01,.ul01 li{リストスタイル:なし;}

上記のページは IE8 と ff ではまだ正常ですが、IE6 と 7 では ul と li の内側の間に距離があります。
list-style:none を定義すると、リスト記号は表示されませんが、その位置は IE6 および 7 に残っていることがわかります。
この UL が FF でどのような属性を持っているかを確認します

図からわかるように、css で list-style:none が定義されている場合、list-style-position には影響がありません。これは FF ブラウザのデフォルト設定のままであり、値は外側になります。
IE6 および 7 では、list-style-position: inside がデフォルトになる可能性があります。
これを確認するために、none 内の list-style:none を list-style:none に変更し、再度テストしました。

実行すると、IE6 および 7 では list-style:none とまったく同じように動作することがわかります。
したがって、IE6 および 7 では、UL に float:left 属性と display:inline 属性があり、list-style:none が設定されている場合、list-style-position もデフォルトで inside になるのではないかと推測します。

したがって、私が得た結論は、IE6 および 7 では、UL に float:left;display:inline; がない場合です。
list-style:none 属性の有無に関係なく、リストシンボルは非表示になり、スペースを占有しません (以下のコードの 5、6)。
UL に float:left;display:inline; 属性がある場合
list-style:none、リストシンボルは非表示になりますが、位置は残ります (list-style-position:inside) (以下のコードでは UL1、ul3)。
list-style:none が設定されていない場合、リスト文字は非表示になり、位置を占めません (list-style-position:outside) (コード UL4)

UL02 は、テストに参加したすべてのブラウザで比較的良好なパフォーマンスを示しました。

この最後のコードでは、さまざまな状況下でのリストスタイルのパフォーマンス、特に IE6 および 7 での 4、5、および 6 のパフォーマンスを比較します。

コードボックスを実行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" /> <title>リストスタイル: none または list-style:none 外側 none;</title> <style type="text/css"> body,ul,li,p {padding:0;margin:0;font-size:12px;} p{font :bold 16px/180% arial;} div{float:left;display:inline;background:#eee;margin:0 10px 10px 0;} p span{text-decoration:line-through;} ul{width:275px; margin:4px 0 0 15px;background:aqua;} .ul01,.ul02,.ul03,.ul04{float:left;display:inline;} .ul01,.ul01 li{list-style:none;} .ul02, .ul02 li{list-style:none 外側なし;} .ul03,.ul03 li{list-style:none 内側 none;} .ul04,.ul04 li{} .ul05{} .ul05,.ul05 li{list- style:none;} .ul06{} .ul06,.ul06 li{} </style> </head> <body> <div> <p>1:float:left;display:list-style:none; </p> <ul class="ul01"> <li><a href="#">純粋な言葉、奇妙な夢、そして駆け巡る思考</a></li> <li><a href="#" >恋愛と同じように、条件はほぼ完璧</a></li> <li><a href="#">キャンパス内の淡い若さと純真な少年少女たち</a></li> <li> < a href="#">躊躇して躊躇して、距離感がずっと分からなくなってしまった</a></li> <li><a href="#">彼女の顔を見て、見慣れたものと知らないものを唱えている言葉の詩</a></li> <li><a href="#">これらの言葉は少女の精神を完璧に表しています</a></li> <li><a href="#"> インターレース光と闇の手がかりと不確かな主人公</a></li> <li><a href="#">繊細で誠実な感情が徐々に現れ、没入していきます</a></li> <li ><a href ="#">高密度の感情が文章の中で繰り返し発酵する</a></li> </ul> </div> <div> <p>2:float:left;display:list-style:外側にはなし;</p> <ul class="ul02"> <li><a href="#">純粋な言葉、奇妙な夢、そして急いでいる考え</a></li> <li ><a href= "#">恋と同じように、条件はほぼ完璧</a></li> <li><a href="#">キャンパス内の淡い若さと純真な少年少女たち</a ></li> <li><a href="#">躊躇しすぎて距離を感じられなくなった</a></li> <li><a href="#">彼女を見つめるその顔は見覚えのあるようで見慣れないものでした詩</a></li> <li><a href="#">これらの言葉は少女の精神を完璧に表しています</a></li> <li> <a href="#">交錯する光暗い手がかりと不確かな主人公</a></li> <li><a href="#">繊細で誠実な感情が徐々に没入していきます</a> a></li> <li><a href= "#">高密度の感情が文章の中で繰り返し発酵する</a></li> </ul> </div> <div> <p>3: float:left;display:inline;list-style:none内側には何もありません;</p> <ul class="ul03"> <li><a href="#">純粋な言葉、奇妙な夢、急いでいる考え</p> a></li> <li><a href ="#">愛と同じように、要件はほぼ完璧です</a></li> <li><a href="#">キャンパスの光若くて無邪気な少年少女</a></li> <li><a href="#">迷って迷って、距離感がずっと分からなくなってしまった</a></li> <li><a href= "#">彼女の顔を見て、馴染み深いけれど馴染みのない詩を暗唱する</a></li> <li><a href="#">これらの言葉は少女の魂を完璧に表しています</a ></li> <li><a href="#">交錯する光と闇の手がかりと不確かな主人公</a></li> <li><a href="#">繊細で誠実な感情が徐々に強調され、没入感が高まります</a></li> <li><a href ="#">高密度の感情がテキスト内で繰り返し発酵します</a></li> </ul> </div> <div> <p>4:float:left;display:inline;no css restart< /p> <ul class="ul04"> <li><a href="#">純粋なテキスト、奇妙な夢のような疾走する思考</a></li> <li><a href="#">まるで愛、条件はほぼ完璧</a></li> <li><a href="#"> キャンパスのほのかに若々しく無邪気な少年少女たち</a></li> <li><a href ="#">ためらって迷って、距離感がわからなくなった</a></li> <li> <a href="#">彼女の顔を見て、知っているようで知らない詩を暗唱する< /a></li> <li><a href="#">これらの言葉は少女の精神を完璧に表しています</a></li> <li><a href="#">光と闇の手がかりが交錯し、不確かな主人公</a></li> <li><a href="#">繊細で繊細誠実な感情が徐々に現れ、没入していきます</a></li> <li><a href="#" >高密度の感情が文章中で繰り返し発酵する</a></li> </ul> </div> <div> <p>5: 表示なし、float 属性 list-style はなし;</p> < ul class="ul05"> <li><a href="#">純粋なテキストは奇妙です夢のように急いでいる考え</a></li> <li><a href="#">愛のように、要件はほぼ完璧</a></li> <li><a href=" #">キャンパス内のほのかな若さと無邪気な少年少女</a></li> <li><a href=" #">躊躇して躊躇して、距離感がずっと分からなくなってしまった</a></li> <li><a href="#">彼女の顔を見つめながら、馴染み深い詩を暗唱する</a> ></li> <li><a href="#">その言葉はまさに少女の魂を表しています</a></li> <li><a href="#">交錯する光と闇の手がかりと不確かな主人公</a></li> <li><a href="#" >繊細で誠実な感情が徐々に浮かび上がり、没入していきます</a></li> <li><a href="#">高密度感情がテキスト内で繰り返し発酵します</a></li> < /ul> </div> <div> <p>6: 表示なし、float 属性なし list-style:none;</p> <ul class= "ul06"> <li><a href="#"> 純粋な言葉、奇妙な夢、そして駆け巡る思考</a></li> <li><a href="#">愛と同じように、必要なものはほとんど完璧</a></li> <li>< a href="#">キャンパスのほのかに若々しく無邪気な少年少女たち</a></li> <li><a href="#">私躊躇して躊躇して、長い間距離感を失っていた</a> </li> <li><a href="#">彼女の顔を見つめながら、馴染み深い、しかし馴染みのない詩を暗唱する</a></li > <li><a href="#">その言葉はまさにぴったりです少女の心を完璧に表しています</a></li> <li><a href="#">交錯する光と闇の手がかりと不確かな主人公</a></li> <li><a href="#">繊細で誠実な感情が徐々に現れ、没入していきます</a></li> <li><a href="#">高密度感情がテキスト内で繰り返し発酵する</a>< /li> </ul> </div> </body> </html>
[Ctrl+A すべて選択ヒント: 最初にコードの一部を変更してから実行を押すことができます]

上記のコードのパフォーマンス結果を比較すると、次のようになります。
Firefox では、list-style-type が none である限り、list-stype-position の値が外側でも内側でも、list-style は適切に非表示にできます。IE6 および 7 では、list-style:none のみが設定されます。 . 、すべての問題を解決するには十分ではないため、CSS リセット時に none の外側で list-style:none を使用する方が良いと思います。