style de liste : aucun dans la réinitialisation CSS

Auteur：Eve Cole Date de mise à jour：2010-05-22 15:52:43

Il s'avère que j'ai déjà rencontré un comportement anormal dans la liste UL au travail.
De plus, j'ai vu hier le post http://bbs.blueidea.com/thread-2984871-1-1.html , j'ai donc testé divers attributs du style de liste et découvert un phénomène intéressant.

Jetons d'abord un coup d'œil à l'explication du style de liste dans le manuel CSS.

Définition et utilisation
L'attribut raccourci de style liste définit toutes les propriétés de liste dans une seule déclaration.

illustrer
Cette propriété est une propriété abrégée qui couvre toutes les autres propriétés de style de liste. Puisqu'il s'applique à tous les éléments avec un affichage d'élément de liste, il ne peut être utilisé que sur les éléments li en HTML et XHTML normaux, mais en fait, il peut être appliqué à n'importe quel élément et est hérité par l'élément d'élément de liste.
Les propriétés suivantes peuvent être définies dans l'ordre :
• type de style de liste
• position-style-liste
• image-style-liste
Il n'est pas nécessaire de définir l'une des valeurs. Par exemple, "list-style:circle inside;" est également autorisé. Les propriétés qui ne sont pas définies utilisent leurs valeurs par défaut.
Valeur par défaut : disque extérieur aucun

Dans le travail quotidien, il est souvent nécessaire d'effectuer une réinitialisation CSS sur ul et li pour masquer les symboles de la liste.
La manière d'écrire la plus couramment utilisée est Ul,li,ol{list-style:none;} (certaines personnes utilisent également ul,li,ol{list-style-type:none;})

Il n'y a aucun problème avec cette page dans IE6, 7, 8 et FF.

Mais ce que nous ne pouvons pas ignorer, c'est que list-style: contient trois attributs :

type de style de liste
position-style-liste
liste-style-img

Si vous ne faites pas attention à ces trois attributs, le style de liste posera parfois des problèmes.

Par exemple, lorsque ul, après avoir flottant, a besoin de display:inline pour résoudre le problème de double marge dans IE6, quelque chose d'étrange se produit :

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

La page ci-dessus est toujours normale dans IE8 et ff, mais dans IE6 et 7, il y a une distance entre l'intérieur de ul et li.
On peut voir que lorsque nous définissons list-style:none, bien que le symbole de liste n'apparaisse pas, sa position est toujours laissée dans IE6 et 7.
Découvrez les attributs de cet UL dans FF

Comme le montre l'image, lorsque list-style:none est défini en CSS, cela n'a aucun effet sur la position du style de liste. Il s'agit toujours du paramètre par défaut du navigateur FF et la valeur est extérieure.
Dans IE6 et 7, list-style-position: inside est probablement la valeur par défaut
Pour confirmer cela, j'ai changé list-style:none en list-style:none à l'intérieur de none et je l'ai testé à nouveau

Après l'avoir exécuté, vous constaterez que dans IE6 et 7, il se comporte exactement de la même manière que list-style:none.
Je suppose donc que dans IE6 et 7, lorsque UL a les attributs float:left et display:inline et que list-style:none est défini, list-style-position est également par défaut à l'intérieur ;

Donc la conclusion à laquelle je suis arrivé est que sous IE6 et 7, quand UL n'a pas float:left;display:inline;:
Qu'il existe ou non l'attribut list-style:none, les symboles de liste sont masqués et n'occupent pas d'espace (5, 6 dans le code ci-dessous)
Lorsque UL a l'attribut float:left;display:inline;
list-style:none, le symbole de la liste est masqué, mais la position est toujours à gauche (list-style-position:inside (UL1, ul3 dans le code ci-dessous) ;
list-style:none n'est pas défini ; le caractère de liste est masqué et n'occupe pas de position (list-style-position:outside) (code UL4)

UL02 a relativement bien fonctionné dans tous les navigateurs participant au test.

Ce dernier morceau de code compare les performances du style liste dans diverses circonstances, notamment les performances de 4, 5 et 6 sous IE6 et 7.

Boîte de code d'exécution
<!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; charset=utf-8" /> <title>list-style : none ou list-style:none outside 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:aucun à l'extérieur de aucun;} .ul03,.ul03 li{list-style:aucun à l'intérieur de aucun;} .ul04,.ul04 li{} .ul05{} .ul05,.ul05 li{liste- style:aucun;} .ul06{} .ul06,.ul06 li{} </style> </head> <body> <div> <p>1:float:left;display:inline list-style:none; </p> <ul class="ul01"> <li><a href="#">Des mots purs, des rêves étranges et des pensées précipitées</a></li> <li><a href="#" > Tout comme l'amour, l'exigence est presque parfaite</a></li> <li><a href="#">Les garçons et les filles jeunes et innocents du campus</a></li> <li> < a href="#">Je suis hésitant et hésitant, et j'ai depuis longtemps perdu le sens de la distance</a></li> <li><a href="#">Regarder son visage et réciter familier et inconnu mots Versets</a></li> <li><a href="#">Ces mots décrivent parfaitement l'esprit d'une fille</a></li> <li><a href="#"> Entrelacé indices clairs et sombres et protagonistes incertains</a></li> <li><a href="#">Les sentiments délicats et sincères émergent progressivement et deviennent immersifs</a></li> <li ><a href ="#">Des émotions de haute densité fermentent à plusieurs reprises dans le texte</a></li> </ul> </div> <div> <p>2:float:left;display:inline list-style: aucun à l'extérieur aucun ;</p> <ul class="ul02"> <li><a href="#">Des mots purs, des rêves étranges et des pensées précipitées</a></li> <li ><a href= "#">Tout comme l'amour, l'exigence est presque parfaite</a></li> <li><a href="#">Les garçons et les filles jeunes et innocents du campus</a ></li> <li><a href="#">J'hésite tellement que je ne sens plus la distance</a></li> <li><a href="#">En la regardant Le visage récité à la fois familier et inconnu versets</a></li> <li><a href="#">Ces mots décrivent parfaitement l'esprit d'une fille</a></li> <li> <a href="#">Lumière entrelacée et des indices sombres et des protagonistes incertains</a></li> <li><a href="#">Les sentiments délicats et sincères deviennent progressivement immersifs</a> a></li> <li><a href= "#">Des émotions à haute densité fermentent à plusieurs reprises dans le texte</a></li> </ul> </div> <div> <p>3 : float:left;display:inline;list-style:none à l'intérieur d'aucun ;</p> <ul class="ul03"> <li><a href="#">Des mots purs, des rêves étranges, des pensées précipitées</p> a></li> <li><a href ="#">Tout comme l'amour, l'exigence est presque parfaite</a></li> <li><a href="#">Lumière sur le campus Des garçons et des filles jeunes et innocents</a></li> <li><a href="#">Je suis hésitant et hésitant, et j'ai depuis longtemps perdu le sens de la distance</a></li> <li><a href= "#">En regardant son visage et réciter des vers familiers et inconnus</a></li> <li><a href="#">Ces mots décrivent parfaitement l'âme d'une fille</a ></li> <li><a href="#"> Des indices clairs et sombres entrelacés et des protagonistes incertains</a></li> <li><a href="#">Les sentiments délicats et sincères progressivement mis en valeur et immersifs</a></li> <li><a href ="#">Des émotions à haute densité fermentent à plusieurs reprises dans le texte</a></li> </ul> </div> <div> <p>4:float:left;display:inline;no css reset< /p> <ul class="ul04"> <li><a href="#">Texte pur, étranges pensées galopantes et rêveuses</a></li> <li><a href="#">Tout comme mon amour, l'exigence est presque parfaite</a></li> <li><a href="#"> Les jeunes garçons et filles faibles et innocents du campus</a></li> <li><a href ="#">Je suis hésitant et hésitant, et je ne ressens plus le sentiment de distance</a></li> <li> <a href="#">Regarder son visage et réciter des vers familiers et inconnus< /a></li> <li><a href="#">Ces mots décrivent parfaitement l'esprit d'une fille</a></li> <li><a href="#">Des indices clairs et sombres entrelacés et des protagonistes incertains</a></li> <li><a href="#">Délicat et délicat Les sentiments sincères émergent progressivement et deviennent immersifs</a></li> <li><a href="#" >Des émotions à haute densité fermentent à plusieurs reprises dans le texte</a></li> </ul> </div> <div> <p>5 : Pas d'affichage, le style de liste d'attribut float n'est aucun ;</p> < ul class="ul05"> <li><a href="#">Le texte pur est étrange Pensées rêveuses et précipitées</a></li> <li><a href="#">Tout comme l'amour, le l'exigence est presque parfaite</a></li> <li><a href=" #">Les garçons et les filles jeunes et innocents du campus</a></li> <li><a href=" #">Je suis hésitant et hésitant, et j'ai depuis longtemps perdu le sens de la distance</a></li> <li><a href="#">Regarder son visage et réciter des vers familiers et inconnus</a ></li> <li><a href="#">Ces mots décrivent exactement l'âme d'une fille</a></li> <li><a href="#">Indices de lumière et d'obscurité entrelacés et protagonistes incertains </a></li> <li><a href="#" >Des sentiments délicats et sincères émergent progressivement et deviennent immersifs</a></li> <li><a href="#">Haute densité les émotions fermentent à plusieurs reprises dans le texte</a></li> </ul> </div> <div> <p>6 : Pas d'affichage, pas d'attribut float list-style:none;</p> <ul class= "ul06"> <li><a href="#"> Mots purs, rêves étranges et pensées précipitées</a></li> <li><a href="#">Tout comme l'amour, l'exigence est presque parfait</a></li> <li>< a href="#">Les garçons et les filles jeunes et innocents du campus</a></li> <li><a href="#">Je je suis hésitante et hésitante, et j'ai depuis longtemps perdu le sens de la distance</a> </li> <li><a href="#">Regarder son visage et réciter des vers familiers et inconnus</a></li > <li><a href="#">Ces mots sont justes. Ils décrivent parfaitement l'âme d'une fille</a></li> <li><a href="#">Des indices clairs et sombres entrelacés et des protagonistes incertains </a></li> <li><a href ="#">Des sentiments délicats et sincères émergent progressivement et deviennent immersifs</a></li> <li><a href="#">Haute densité les émotions fermentent à plusieurs reprises dans le texte</a>< /li> </ul> </div> </body> </html>
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

En comparant les résultats de performances du code ci-dessus, je pense :
Dans Firefox, tant que list-style-type est none, quelle que soit la valeur de list-stype-position à l'extérieur ou à l'intérieur, list-style peut être bien masqué. Dans IE6 et 7, seul list-style:none est défini. , ne suffit pas à résoudre tous les problèmes, je pense donc qu'il est préférable d'utiliser list-style:none en dehors de none lors de la réinitialisation CSS.