estilo de lista: nenhum na redefinição de CSS

Autor：Eve Cole Data da Última Atualização：2010-05-22 15:52:43

Acontece que uma vez encontrei algum comportamento anormal na lista UL no trabalho.
Além disso, vi a postagem http://bbs.blueidea.com/thread-2984871-1-1.html ontem, então testei vários atributos do estilo de lista e descobri um fenômeno interessante.

Vamos primeiro dar uma olhada na explicação do estilo de lista no manual CSS.

Definição e uso
O atributo abreviado de estilo de lista define todas as propriedades da lista em uma declaração.

ilustrar
Esta propriedade é uma propriedade abreviada que abrange todas as outras propriedades de estilo de lista. Como se aplica a todos os elementos com exibição de item de lista, só pode ser usado em elementos li em HTML e XHTML normais, mas na verdade pode ser aplicado a qualquer elemento e é herdado pelo elemento item de lista.
As seguintes propriedades podem ser definidas em ordem:
• tipo de estilo de lista
•posição em estilo de lista
•imagem em estilo de lista
Não é necessário definir um dos valores. Por exemplo, "list-style:circle inside;" também é permitido. As propriedades que não estão configuradas usam seus valores padrão.
Valor padrão: disco fora de nenhum

No trabalho diário, muitas vezes é necessário redefinir css em ul e li para ocultar os símbolos da lista.
A forma de escrita mais comumente usada é Ul,li,ol{list-style:none;} (algumas pessoas também usam ul,li,ol{list-style-type:none;})

Não há problema com esta página no IE6, 7, 8 e FF.

Mas o que não podemos ignorar é que list-style: contém três atributos:

tipo de estilo de lista
posição de estilo de lista
estilo de lista-img

Se você não prestar atenção a esses três atributos, o estilo de lista às vezes causará problemas.

Por exemplo, quando ul, após flutuar, precisa de display:inline para resolver o problema de margem dupla no IE6, algo estranho acontece:

.ul01{float:esquerda;display:inline;}
.ul01,.ul01 li{estilo de lista: nenhum;}

A página acima ainda é normal no IE8 e ff, mas no IE6 e 7 há uma distância entre o interior de ul e li.
Pode-se observar que quando definimos list-style:none, embora o símbolo da lista não apareça, sua posição ainda permanece no IE6 e 7.
Veja quais atributos esta UL possui no FF

Como pode ser visto na imagem, quando list-style:none é definido em css, ele não tem efeito na posição do estilo de lista. Ainda é a configuração padrão do navegador FF e o valor está fora.
No IE6 e 7, list-style-position: inside provavelmente será o padrão
Para confirmar isso, mudei list-style:none para list-style:none dentro de none e testei novamente

Depois de executá-lo, você descobrirá que no IE6 e 7 ele se comporta exatamente da mesma forma que list-style:none.
Então, especulo que no IE6 e 7, quando UL tem atributos float:left e display:inline e list-style:none está definido, list-style-position também assume como padrão inside;

Portanto, a conclusão a que cheguei é que no IE6 e 7, quando o UL não possui float:left;display:inline;:
Independentemente de existir o atributo list-style:none, os símbolos da lista ficam ocultos e não ocupam espaço (5, 6 no código abaixo)
Quando UL possui o atributo float:left;display:inline;
list-style:none, o símbolo da lista está oculto, mas a posição ainda permanece (list-style-position:inside (UL1, ul3 no código abaixo)
list-style:none não está definido; o caractere da lista está oculto e não ocupa uma posição (list-style-position:outside) (código UL4)

O UL02 teve um desempenho relativamente bom em todos os navegadores participantes do teste.

Este último trecho de código compara o desempenho do estilo de lista sob várias circunstâncias, especialmente o desempenho do 4, 5 e 6 no IE6 e 7.

Execute a caixa de código
<!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>estilo de lista: none ou list-style:none fora de 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{largura: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{estilo de lista: nenhum fora de nenhum;} .ul03,.ul03 li{estilo de lista: nenhum dentro de nenhum;} .ul04,.ul04 li{} .ul05{} .ul05,.ul05 li{lista- style:none;} .ul06{} .ul06,.ul06 li{} </style> </head> <body> <div> <p>1:float:left;display:inline list-style:none; </p> <ul class="ul01"> <li><a href="#">Palavras puras, sonhos estranhos e pensamentos precipitados</a></li> <li><a href="#" > Assim como o amor, o requisito é quase perfeito</a></li> <li><a href="#">Os meninos e meninas jovens e inocentes do campus</a></li> <li> < a href="#">Estou hesitante e hesitante, e há muito perdi a sensação de distância</a></li> <li><a href="#">Olhar para o rosto dela e recitar familiares e desconhecidos palavras Versos</a></li> <li><a href="#">Essas palavras descrevem perfeitamente o espírito de uma garota</a></li> <li><a href="#"> Entrelaçadas pistas claras e escuras e protagonistas incertos</a></li> <li><a href="#">Os sentimentos delicados e sinceros emergem gradualmente e tornam-se envolventes</a></li> <li ><a href ="#">Emoções de alta densidade fermentam repetidamente no texto</a></li> </ul> </div> <div> <p>2:float:left;display:inline list-style: nenhum fora de nenhum;</p> <ul class="ul02"> <li><a href="#">Palavras puras, sonhos estranhos e pensamentos precipitados</a></li> <li ><a href= "#">Assim como o amor, o requisito é quase perfeito</a></li> <li><a href="#">Os meninos e meninas jovens e inocentes do campus</a ></li> <li><a href="#">Estou tão hesitante que não sinto mais a distância</a></li> <li><a href="#">Olhando para ela O rosto recitou familiar, mas desconhecido versos</a></li> <li><a href="#">Essas palavras descrevem perfeitamente o espírito de uma menina</a></li> <li> <a href="#">Luz entrelaçada e pistas sombrias e protagonistas incertos</a></li> <li><a href="#">Os sentimentos delicados e sinceros tornam-se gradualmente envolventes</a> a></li> <li><a href= "#">Emoções de alta densidade fermentam repetidamente no texto</a></li> </ul> </div> <div> <p>3: float:left;display:inline;list-style:none dentro de nenhum;</p> <ul class="ul03"> <li><a href="#">Palavras puras, sonhos estranhos, pensamentos precipitados</p> a></li> <li><a href ="#">Assim como o amor, a exigência é quase perfeita</a></li> <li><a href="#">Luz no campus Meninos e meninas jovens e inocentes</a></li> <li><a href="#">Estou hesitante e hesitante, e há muito perdi a sensação de distância</a></li> <li><a href= "#">Olhar para o rosto dela e recitando versos familiares, mas desconhecidos</a></li> <li><a href="#">Essas palavras descrevem perfeitamente a alma de uma garota</a ></li> <li><a href="#"> Pistas claras e escuras entrelaçadas e protagonistas incertos</a></li> <li><a href="#">Os sentimentos delicados e sinceros gradualmente realçados e envolventes</a></li> <li><a href ="#">Emoções de alta densidade fermentam repetidamente no texto</a></li> </ul> </div> <div> <p>4:float:left;display:inline;sem redefinição de css< /p> <ul class="ul04"> <li><a href="#">Texto puro, estranhos pensamentos sonhadores e galopantes</a></li> <li><a href="#">Assim como amor, o requisito é quase perfeito</a></li> <li><a href="#"> Os meninos e meninas jovens e inocentes do campus</a></li> <li><a href ="#">Estou hesitante e hesitante, e não sinto mais a sensação de distância</a></li> <li> <a href="#">Olhar para o rosto dela e recitar versos familiares, mas desconhecidos< /a></li> <li><a href="#">Essas palavras descrevem perfeitamente o espírito de uma garota</a></li> <li><a href="#">Pistas claras e escuras entrelaçadas e protagonistas incertos</a></li> <li><a href="#">Delicados e delicados Os sentimentos sinceros emergem gradualmente e se tornam envolventes</a></li> <li><a href="#" >Emoções de alta densidade fermentam repetidamente no texto</a></li> </ul> </div> <div> <p>5: Sem exibição, o estilo de lista do atributo float é nenhum;</p> < ul class="ul05"> <li><a href="#">Texto puro é estranho Pensamentos sonhadores e apressados</a></li> <li><a href="#">Assim como o amor, o o requisito é quase perfeito</a></li> <li><a href=" #">Os meninos e meninas jovens e inocentes do campus</a></li> <li><a href=" #">Estou hesitante e hesitante e há muito perdi a sensação de distância</a></li> <li><a href="#">Olhar para o rosto dela e recitar versos familiares, mas desconhecidos</a </li> <li><a href="#">Essas palavras descrevem exatamente a alma de uma garota</a></li> <li><a href="#">Pistas claras e escuras entrelaçadas e protagonistas incertos </a></li> <li><a href="#" >Sentimentos delicados e sinceros emergem gradualmente e se tornam envolventes</a></li> <li><a href="#">Alta densidade emoções fermentam repetidamente no texto</a></li> </ul> </div> <div> <p>6: Sem exibição, sem atributo flutuante list-style:none;</p> <ul class= "ul06"> <li><a href="#"> Palavras puras, sonhos estranhos e pensamentos precipitados</a></li> <li><a href="#">Assim como o amor, a exigência é quase perfeito</a></li> <li>< a href="#">Os meninos e meninas jovens e inocentes do campus</a></li> <li><a href="#">Eu estou hesitante e hesitante, e há muito perdi a sensação de distância</a> </li> <li><a href="#">Olhar para o rosto dela e recitar versos familiares, mas desconhecidos</a></li > <li><a href="#">Essas palavras estão certas Descreve perfeitamente a alma de uma garota</a></li> <li><a href="#">Pistas claras e escuras entrelaçadas e protagonistas incertos </a></li> <li><a href ="#">Sentimentos delicados e sinceros emergem gradualmente e se tornam envolventes</a></li> <li><a href="#">Alta densidade emoções fermentam repetidamente no texto</a>< /li> </ul> </div> </body> </html>
[Ctrl+A Selecionar todas as dicas: você pode modificar parte do código primeiro e depois pressionar Executar]

Ao comparar os resultados de desempenho do código acima, penso:
No Firefox, desde que o tipo de estilo de lista seja nenhum, não importa se o valor da posição do tipo de lista está fora ou dentro, o estilo de lista pode ser bem escondido. No IE6 e 7, apenas estilo de lista: nenhum está definido. ., não é suficiente para resolver todos os problemas, então acho melhor usar list-style:none fora de none quando o css for redefinido.