estilo de lista: ninguno en restablecimiento de CSS

Autor：Eve Cole Fecha de actualización：2010-05-22 15:52:43

Resulta que una vez encontré un comportamiento anormal en la lista UL en el trabajo.
Además, ayer vi la publicación http://bbs.blueidea.com/thread-2984871-1-1.html , así que probé varios atributos del estilo de lista y descubrí un fenómeno interesante.

Primero echemos un vistazo a la explicación del estilo de lista en el manual de CSS.

Definición y uso
El atributo abreviado de estilo de lista establece todas las propiedades de la lista en una sola declaración.

ilustrar
Esta propiedad es una propiedad abreviada que cubre todas las demás propiedades de estilo de lista. Dado que se aplica a todos los elementos con visualización de elementos de lista, solo se puede usar en elementos li en HTML y XHTML normales, pero de hecho se puede aplicar a cualquier elemento y lo hereda el elemento de elemento de lista.
Las siguientes propiedades se pueden configurar en orden:
•tipo-estilo-lista
• posición-estilo-lista
•imagen-estilo-lista
No es necesario establecer uno de los valores. Por ejemplo, también se permite "list-style:circle inside;". Las propiedades que no están configuradas utilizan sus valores predeterminados.
Valor predeterminado: disco fuera ninguno

En el trabajo diario, a menudo es necesario restablecer CSS en ul y li para ocultar los símbolos de la lista.
La forma de escritura más utilizada es Ul,li,ol{list-style:none;} (algunas personas también usan ul,li,ol{list-style-type:none;})

No hay ningún problema con esta página en IE6, 7, 8 y FF.

Pero lo que no podemos ignorar es que list-style: contiene tres atributos:

tipo de estilo de lista
posición-estilo-lista
estilo-lista-img

Si no presta atención a estos tres atributos, el estilo de lista a veces causará problemas.

Por ejemplo, cuando ul, después de flotar, necesita display:inline para resolver el problema del doble margen en IE6, sucede algo extraño:

.ul01{float:izquierda;display:inline;}
.ul01,.ul01 li{estilo de lista:ninguno;}

La página anterior sigue siendo normal en IE8 y ff, pero en IE6 y 7, hay una distancia entre el interior de ul y li.
Se puede ver que cuando definimos estilo de lista: ninguno, aunque el símbolo de lista no aparece, su posición aún permanece en IE6 y 7.
Vea qué atributos tiene este UL en FF

Como se puede ver en la imagen, cuando el estilo de lista: ninguno está definido en CSS, no tiene ningún efecto en la posición del estilo de lista. Sigue siendo la configuración predeterminada del navegador FF y el valor está fuera.
En IE6 y 7, es probable que list-style-position: inside sea el valor predeterminado
Para confirmar esto, cambié list-style:none a list-style:none dentro de none y lo probé nuevamente.

Después de ejecutarlo, puede encontrar que en IE6 y 7 se comporta exactamente igual que el estilo de lista: ninguno.
Así que especulo que en IE6 y 7, cuando UL tiene atributos float:left y display:inline y list-style:none está configurado, list-style-position también está predeterminado en inside;

Entonces, la conclusión a la que llegué es que bajo IE6 y 7, cuando UL no tiene float:left;display:inline;:
Independientemente de si existe el atributo estilo de lista: ninguno, los símbolos de la lista están ocultos y no ocupan espacio (5, 6 en el código siguiente)
Cuando UL tiene el atributo float:left;display:inline;
estilo de lista: ninguno, el símbolo de la lista está oculto, pero la posición aún permanece (posición de estilo de lista: dentro (UL1, ul3 en el código siguiente)
estilo de lista: ninguno no está configurado; el carácter de la lista está oculto y no ocupa una posición (posición de estilo de lista: afuera) (código UL4)

UL02 funcionó relativamente bien en todos los navegadores que participaron en la prueba.

Este último fragmento de código compara el rendimiento del estilo de lista en diversas circunstancias, especialmente el rendimiento de 4, 5 y 6 en IE6 y 7.

Ejecutar cuadro de código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//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>estilo de lista: ninguno o estilo de lista: ninguno fuera de ninguno;</title> <style type="text/css"> body,ul,li,p {padding:0;margin:0;font-size:12px;} p{font :negrita 16px/180% arial;} div{float:left;display:inline;background:#eee;margin:0 10px 10px 0;} p span{text-decoration:line-through;} ul{width:275px; margen:4px 0 0 15px;fondo:aqua;} .ul01,.ul02,.ul03,.ul04{float:left;display:inline;} .ul01,.ul01 li{list-style:none;} .ul02, .ul02 li{estilo de lista:ninguno fuera de ninguno;} .ul03,.ul03 li{estilo de lista:ninguno dentro de ninguno;} .ul04,.ul04 li{} .ul05{} .ul05,.ul05 li{lista- estilo: ninguno;} .ul06{} .ul06,.ul06 li{} </style> </head> <body> <div> <p>1:float:left;display:inline; list-style:none; </p> <ul class="ul01"> <li><a href="#">Palabras puras, sueños extraños y pensamientos apresurados</a></li> <li><a href="#" > Al igual que el amor, el requisito es casi perfecto</a></li> <li><a href="#">Los jóvenes e inocentes niños y niñas débiles en el campus</a></li> <li> < a href="#">Estoy indeciso y vacilante, y hace tiempo que perdí el sentido de la distancia</a></li> <li><a href="#">Mirándola a la cara y recitando lo familiar y lo desconocido palabras Versos</a></li> <li><a href="#">Esas palabras describen perfectamente el espíritu de una niña</a></li> <li><a href="#"> Entrelazadas Pistas claras y oscuras y protagonistas inciertos</a></li> <li><a href="#">Los sentimientos delicados y sinceros emergen gradualmente y se vuelven inmersivos</a></li> <li ><a href ="#">Las emociones de alta densidad fermentan repetidamente en el texto</a></li> </ul> </div> <div> <p>2:float:left;display:inline; ninguno fuera ninguno;</p> <ul class="ul02"> <li><a href="#">Palabras puras, sueños extraños y pensamientos apresurados</a></li> <li ><a href= "#">Al igual que el amor, el requisito es casi perfecto</a></li> <li><a href="#">Los débiles, jóvenes e inocentes niños y niñas del campus</a ></li> <li><a href="#">Estoy tan indeciso que ya no siento la distancia</a></li> <li><a href="#">Mirándola El rostro recitado familiar pero desconocido versos</a></li> <li><a href="#">Esas palabras describen perfectamente el espíritu de una niña</a></li> <li> <a href="#">Luz entrelazada y pistas oscuras y protagonistas inciertos</a></li> <li><a href="#">Los sentimientos delicados y sinceros poco a poco se vuelven inmersivos</a> a></li> <li><a href= "#">Las emociones de alta densidad fermentan repetidamente en el texto</a></li> </ul> </div> <div> <p>3: float:left;display:inline;list-style:none dentro de ninguno;</p> <ul class="ul03"> <li><a href="#">Palabras puras, sueños extraños, pensamientos apresurados</p> a></li> <li><a href ="#">Al igual que el amor, el requisito es casi perfecto</a></li> <li><a href="#">Luz en el campus Niños y niñas jóvenes e inocentes</a></li> <li><a href="#">Estoy vacilante y vacilante, y hace tiempo que perdí el sentido de la distancia</a></li> <li><a href= "#">Mirándola a la cara y recitando versos familiares pero desconocidos</a></li> <li><a href="#">Esas palabras describen perfectamente el alma de una niña</a ></li> <li><a href="#"> Pistas claras y oscuras entrelazadas y protagonistas inciertos</a></li> <li><a href="#">Los sentimientos delicados y sinceros gradualmente resaltados e inmersivos</a></li> <li><a href ="#">Las emociones de alta densidad fermentan repetidamente en el texto</a></li> </ul> </div> <div> <p>4:float:left;display:inline;no css reset< /p> <ul class="ul04"> <li><a href="#">Texto puro, extraños pensamientos galopantes de ensueño</a></li> <li><a href="#">Igual que Amor, el requisito es casi perfecto</a></li> <li><a href="#"> Los débiles niños y niñas jóvenes e inocentes en el campus</a></li> <li><a href ="#">Estoy vacilante y vacilante, y ya no siento la sensación de distancia</a></li> <li> <a href="#">Mirándola a la cara y recitando versos familiares pero desconocidos< /a></li> <li><a href="#">Esas palabras describen perfectamente el espíritu de una niña</a></li> <li><a href="#">Pistas y pistas de luz y oscuridad entrelazadas. protagonistas inciertos</a></li> <li><a href="#">Delicados y delicados Los sentimientos sinceros emergen gradualmente y se vuelven inmersivos</a></li> <li><a href="#" >Las emociones de alta densidad fermentan repetidamente en el texto</a></li> </ul> </div> <div> <p>5: Sin visualización, el estilo de lista del atributo flotante es ninguno;</p> < ul class="ul05"> <li><a href="#">El texto puro es extraño. Pensamientos soñadores y apresurados</a></li> <li><a href="#">Al igual que el amor, el El requisito es casi perfecto</a></li> <li><a href=" #">Los jóvenes e inocentes niños y niñas débiles en el campus</a></li> <li><a href=" #">Estoy vacilante y vacilante, y hace tiempo que perdí la sensación de distancia</a></li> <li><a href="#">Mirándola a la cara y recitando versos familiares pero desconocidos</a </li> <li><a href="#">Esas palabras describen exactamente el alma de una niña</a></li> <li><a href="#">Pistas de luz y oscuridad entrelazadas y protagonistas inciertos </a></li> <li><a href="#" >Sentimientos delicados y sinceros emergen gradualmente y se vuelven inmersivos</a></li> <li><a href="#">Alta densidad las emociones fermentan repetidamente en el texto</a></li> </ul> </div> <div> <p>6: Sin visualización, sin atributo flotante list-style:none;</p> <ul class= "ul06"> <li><a href="#">Palabras puras, sueños extraños y pensamientos apresurados</a></li> <li><a href="#">Al igual que el amor, el requisito es casi perfecto</a></li> <li>< a href="#">Los débiles niños y niñas jóvenes e inocentes del campus</a></li> <li><a href="#">Yo Estoy vacilante y vacilante, y hace tiempo que perdí la sensación de distancia</a> </li> <li><a href="#">Mirándola a la cara y recitando versos familiares pero desconocidos</a></li > <li><a href="#">Esas palabras son perfectas. Describe perfectamente el alma de una niña.</a></li> <li><a href="#">Pistas de luz y oscuridad entrelazadas y protagonistas inciertos. </a></li> <li><a href ="#">Sentimientos delicados y sinceros emergen gradualmente y se vuelven inmersivos</a></li> <li><a href="#">Alta densidad las emociones fermentan repetidamente en el texto</a>< /li> </ul> </div> </body> </html>
[Ctrl+A Seleccionar todos los consejos: primero puede modificar parte del código y luego presionar Ejecutar]

Al comparar los resultados de rendimiento del código anterior, creo:
En Firefox, siempre que el tipo de estilo de lista sea ninguno, sin importar que el valor de la posición de tipo de lista esté afuera o dentro, el estilo de lista se puede ocultar bien. En IE6 y 7, solo se establece estilo de lista: ninguno. , no es suficiente para resolver todos los problemas, así que creo que es mejor usar list-style:none fuera de none cuando se restablece CSS.