Listenstil: Keine im CSS-Reset

Autor：Eve Cole Aktualisierungszeit：2010-05-22 15:52:43

Es stellte sich heraus, dass ich bei der Arbeit einmal auf ein ungewöhnliches Verhalten in der UL-Liste gestoßen bin.
Außerdem habe ich gestern den Beitrag http://bbs.blueidea.com/thread-2984871-1-1.html gesehen, also verschiedene Attribute des Listenstils getestet und ein interessantes Phänomen entdeckt.

Werfen wir zunächst einen Blick auf die Erklärung des Listenstils im CSS-Handbuch.

Definition und Verwendung
Das Kurzattribut list-style legt alle Listeneigenschaften in einer Deklaration fest.

veranschaulichen
Bei dieser Eigenschaft handelt es sich um eine Abkürzungseigenschaft, die alle anderen Listenstileigenschaften abdeckt. Da es für alle Elemente mit einer List-Item-Anzeige gilt, kann es nur für li-Elemente in normalem HTML und XHTML verwendet werden. Tatsächlich kann es jedoch auf jedes Element angewendet werden und wird vom List-Item-Element geerbt.
Die folgenden Eigenschaften können der Reihe nach festgelegt werden:
•Listenstiltyp
•list-style-position
•list-style-image
Es ist nicht erforderlich, einen der Werte festzulegen. Beispielsweise ist auch „list-style:circle inside;“ zulässig. Nicht festgelegte Eigenschaften verwenden ihre Standardwerte.
Standardwert: Disc außerhalb keine

Bei der täglichen Arbeit ist es häufig erforderlich, einen CSS-Reset für ul und li durchzuführen, um die Listensymbole auszublenden.
Die am häufigsten verwendete Schreibweise ist Ul,li,ol{list-style:none;} (manche Leute verwenden auch ul,li,ol{list-style-type:none;})

Es gibt kein Problem mit dieser Seite in IE6, 7, 8 und FF.

Was wir jedoch nicht ignorieren können, ist, dass list-style: drei Attribute enthält:

Listenstiltyp
Listenstil-Position
Listenstil-Bild

Wenn Sie diese drei Attribute nicht beachten, kann der Listenstil manchmal Probleme verursachen.

Wenn ul beispielsweise nach dem Floating display:inline benötigt, um das Doppelmargenproblem in IE6 zu lösen, passiert etwas Seltsames:

.ul01{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}

Die obige Seite ist in IE8 und ff immer noch normal, aber in IE6 und 7 gibt es einen Abstand zwischen der Innenseite von ul und li.
Es ist ersichtlich, dass bei der Definition von list-style:none das Listensymbol zwar nicht angezeigt wird, seine Position jedoch in IE6 und 7 verbleibt.
Sehen Sie, welche Attribute dieser UL in FF hat

Wie aus dem Bild hervorgeht, hat die Definition von list-style:none in CSS keinen Einfluss auf die Position des Listenstils. Dies ist immer noch die Standardeinstellung des FF-Browsers und der Wert liegt außerhalb.
In IE6 und 7 ist list-style-position: inside wahrscheinlich die Standardeinstellung
Um dies zu bestätigen, habe ich list-style:none in list-style:none innerhalb von none geändert und es erneut getestet

Nachdem Sie es ausgeführt haben, können Sie feststellen, dass es sich in IE6 und 7 genauso verhält wie list-style:none.
Daher vermute ich, dass in IE6 und 7, wenn UL über die Attribute float:left und display:inline verfügt und list-style:none festgelegt ist, list-style-position ebenfalls standardmäßig auf inside gesetzt ist;

Ich bin also zu dem Schluss gekommen, dass unter IE6 und 7, wenn UL nicht über float:left;display:inline;: verfügt.
Unabhängig davon, ob das Attribut list-style:none vorhanden ist, werden die Listensymbole ausgeblendet und belegen keinen Platz (5, 6 im folgenden Code).
Wenn UL das Attribut float:left;display:inline; hat
list-style:none, das Listensymbol ist ausgeblendet, aber die Position bleibt bestehen (list-style-position:inside); (UL1, ul3 im Code unten)
list-style:none ist nicht gesetzt; das Listenzeichen ist ausgeblendet und belegt keine Position (list-style-position:outside) (Code UL4)

UL02 schnitt in allen am Test teilnehmenden Browsern relativ gut ab.

Dieser letzte Codeabschnitt vergleicht die Leistung des Listenstils unter verschiedenen Umständen, insbesondere die Leistung von 4, 5 und 6 unter IE6 und 7.

Codefeld ausführen
<!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>list-style: none oder list-style:none außerhalb von 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 Outside none;} .ul03,.ul03 li{list-style:none inside none;} .ul04,.ul04 li{} .ul05{} .ul05,.ul05 li{list- style:none;} .ul06{} .ul06,.ul06 li{} </style> </head> <body> <div> <p>1:float:left;display:inline; </p> <ul class="ul01"> <li><a href="#">Reine Worte, seltsame Träume und hektische Gedanken</a></li> <li><a href="#" > Genau wie die Liebe ist die Anforderung nahezu perfekt</a></li> <li><a href="#">Die schwachen, jugendlichen und unschuldigen Jungen und Mädchen auf dem Campus</a></li> <li> < a href="#">Ich zögere und zögere und habe schon lange das Gefühl für Distanz verloren</a></li> <li><a href="#">Ich schaue ihr ins Gesicht und rezitiere Vertrautes und Unbekanntes Worte Verse</a></li> <li><a href="#">Diese Worte beschreiben perfekt den Geist eines Mädchens</a></li> <li><a href="#"> Interlaced Helle und dunkle Hinweise und unsichere Protagonisten</a></li> <li><a href="#">Die zarten und aufrichtigen Gefühle kommen nach und nach zum Vorschein und werden immersiv</a></li> <li ><a href ="#">Im Text gären immer wieder Emotionen mit hoher Dichte</a></li> </ul> </div> <div> <p>2:float:left;display:inline; keine außerhalb keiner;</p> <ul class="ul02"> <li><a href="#">Reine Worte, seltsame Träume und hektische Gedanken</a></li> <li ><a href= "#">Genau wie die Liebe ist die Anforderung nahezu perfekt</a></li> <li><a href="#">Die schwachen, jugendlichen und unschuldigen Jungen und Mädchen auf dem Campus</a ></li> <li><a href="#">Ich zögere so sehr, dass ich die Distanz nicht mehr spüre</a></li> <li><a href="#">Als ich sie ansah, rezitierte das Gesicht Vertrautes und doch Unbekanntes Verse</a></li> <li><a href="#">Diese Worte beschreiben perfekt den Geist eines Mädchens</a></li> <li> <a href="#">Interlaced Light und dunkle Hinweise und unsichere Protagonisten</a></li> <li><a href="#">Die zarten und aufrichtigen Gefühle werden nach und nach immersiver</a> a></li> <li><a href= "#">Im Text gären immer wieder hochdichte Emotionen</a></li> </ul> </div> <div> <p>3: float:left;display:inline;list-style:none in keinem drin;</p> <ul class="ul03"> <li><a href="#">Reine Worte, seltsame Träume, rauschende Gedanken</p> a></li> <li><a href ="#">Genau wie die Liebe sind die Voraussetzungen nahezu perfekt</a></li> <li><a href="#">Licht auf dem Campus Jugendliche und unschuldige Jungen und Mädchen</a></li> <li><a href="#">Ich bin zögerlich und zögerlich, und ich habe das Gefühl für Distanz schon lange verloren</a></li> <li><a href= "#">Ich schaue ihr ins Gesicht und Rezitieren vertrauter und doch unbekannter Verse</a></li> <li><a href="#">Diese Worte beschreiben perfekt die Seele eines Mädchens</a ></li> <li><a href="#"> Verschachtelte helle und dunkle Hinweise und unsichere Protagonisten</a></li> <li><a href="#">Die zarten und aufrichtigen Gefühle werden nach und nach hervorgehoben und eindringlich</a></li> <li><a href ="#">Im Text gären immer wieder Emotionen mit hoher Dichte</a></li> </ul> </div> <div> <p>4:float:left;display:inline;no css reset< /p> <ul class="ul04"> <li><a href="#">Reiner Text, seltsame, verträumte, galoppierende Gedanken</a></li> <li><a href="#">Genau wie Liebe Grüße, die Anforderung ist fast perfekt</a></li> <li><a href="#"> Die schwachen, jugendlichen und unschuldigen Jungen und Mädchen auf dem Campus</a></li> <li><a href ="#">Ich zögere und zögere, und ich spüre nicht mehr das Gefühl der Distanz</a></li> <li> <a href="#">Ich schaue ihr ins Gesicht und rezitiere bekannte, aber dennoch unbekannte Verse< /a></li> <li><a href="#">Diese Worte beschreiben perfekt den Geist eines Mädchens</a></li> <li><a href="#">Verschachtelte helle und dunkle Hinweise und unsichere Protagonisten</a></li> <li><a href="#">Zart und zart Die aufrichtigen Gefühle kommen nach und nach zum Vorschein und werden immersiv</a></li> <li><a href="#" >Im Text gären immer wieder Emotionen mit hoher Dichte</a></li> </ul> </div> <div> <p>5: Keine Anzeige, Float-Attribut-Listenstil ist keine;</p> < ul class="ul05"> <li><a href="#">Reiner Text ist seltsam. Verträumte und rauschende Gedanken</a></li> <li><a href="#">Genau wie die Liebe Die Anforderungen sind nahezu perfekt</a></li> <li><a href=" #">Die schwachen, jugendlichen und unschuldigen Jungen und Mädchen auf dem Campus</a></li> <li><a href=" #">Ich zögere und zögere und habe schon lange das Gefühl für Distanz verloren</a></li> <li><a href="#">Ich schaue ihr ins Gesicht und rezitiere bekannte und doch unbekannte Verse</a ></li> <li><a href="#">Diese Worte beschreiben genau die Seele eines Mädchens</a></li> <li><a href="#">Verschachtelte helle und dunkle Hinweise und unsichere Protagonisten </a></li> <li><a href="#" >Zarte und aufrichtige Gefühle tauchen nach und nach auf und werden immersiv</a></li> <li><a href="#">Hohe Dichte Emotionen gären immer wieder im Text</a></li> </ul> </div> <div> <p>6: Keine Anzeige, kein Float-Attribut list-style:none;</p> <ul class= "ul06"> <li><a href="#">Reine Worte, seltsame Träume und hektische Gedanken</a></li> <li><a href="#">Genau wie bei der Liebe ist die Anforderung fast erfüllt perfekt</a></li> <li>< a href="#">Die schwachen, jugendlichen und unschuldigen Jungen und Mädchen auf dem Campus</a></li> <li><a href="#">I Ich bin zögerlich und zögerlich, und ich habe das Gefühl für Distanz schon lange verloren</a> </li> <li><a href="#">Ich schaue ihr ins Gesicht und rezitiere bekannte und doch unbekannte Verse</a></li > <li><a href="#">Diese Worte sind genau richtig. Es beschreibt perfekt die Seele eines Mädchens</a></li> <li><a href="#">Verschachtelte helle und dunkle Hinweise und unsichere Protagonisten </a></li> <li><a href ="#">Zarte und aufrichtige Gefühle tauchen nach und nach auf und werden immersiv</a></li> <li><a href="#">Hohe Dichte Emotionen gären immer wieder im Text</a>< /li> </ul> </div> </body> </html>
[Strg+A Alle Tipps auswählen: Sie können zuerst einen Teil des Codes ändern und dann Ausführen drücken]

Durch den Vergleich der Leistungsergebnisse des obigen Codes denke ich:
Solange in Firefox list-style-type „none“ ist, kann list-style unabhängig davon, ob der Wert „list-stype-position“ außerhalb oder innerhalb liegt, gut ausgeblendet werden. In IE6 und 7 ist nur „list-style:none“ festgelegt . reicht nicht aus, um alle Probleme zu lösen, daher ist es meiner Meinung nach besser, list-style:none außerhalb von none zu verwenden, wenn CSS zurückgesetzt wird