Liste des articles transformés en float: blocs gauche ne paraissent pas dans IE6

J'ai un UL qui ressemble à ceci:Liste des articles transformés en float: blocs gauche ne paraissent pas dans IE6

<ul class="popular-pages"> 
    <li><a href="region/us/california/">California</a></li> 
    <li><a href="region/us/michigan/">Michigan</a></li> 
    <li><a href="region/us/missouri/">Missouri</a></li> 
    <li><a href="region/us/new-york/">New York</a></li> 
    <li><a href="region/us/oregon/">Oregon</a></li> 
    <li><a href="region/us/oregon-washington/">Oregon; Washington</a></li> 
    <li><a href="region/us/pennsylvania/">Pennsylvania</a></li> 
    <li><a href="region/us/texas/">Texas</a></li> 
    <li><a href="region/us/virginia/">Virginia</a></li> 
    <li><a href="region/us/washington/">Washington</a></li> 
</ul>

Et CSS qui ressemble à ceci:

ul.popular-pages li a { 
    display:block; 
    float:left; 
    border-right:1px solid #b0b0b0; 
    border-bottom:1px solid #8d8d8d; 
    padding:10px; 
    background-color:#ebf4e0; 
    margin:2px; color:#526d3f 
} 
ul.popular-pages li a:hover { 
    text-decoration:none; 
    border-left:1px solid #b0b0b0; 
    border-top:1px solid #8d8d8d; 
    border-right:none; 
    border-bottom:none; 
}

Il fonctionne très bien dans navigateurs modernes, mais il ressemble à ceci dans IE6. Aucune suggestion? alt text

Source

2008-11-11 Anonymous

Qu'est-ce que DOCTYPE utilisez-vous? DOCTYPE a un impact sur le rendu des navigateurs.

Source

2008-11-11 16:17:35 Greg

essayez d'utiliser ce hack CSS pour IE6.

*html ul.popular-pages li a { 
    display:block; 
    float:left; 
    border-right:1px solid #b0b0b0; 
    border-bottom:1px solid #8d8d8d; 
    padding:10px; 
    background-color:#ebf4e0; 
    margin:2px; 
    color:#526d3f 
} 

*html ul.popular-pages li a:hover { 
    text-decoration:none; 
    border-left:1px solid #b0b0b0; 
    border-top:1px solid #8d8d8d; 
    border-right:none; 
    border-bottom:none; 
}

puis ajustez votre définition CSS pour IE6

Source

2008-11-11 16:20:26 Arief

La raison de votre mise en page est probablement parce que vous avez le flotteur sur l'ancre, déplacez à la liste-point à la place.

 

ul.popular-pages li { 
float: left; 
}

Puisque vous n'êtes pas mettre toute la largeur de votre Li, je vous suggère de sauter le flotteur et l'affichage mis: en ligne sur votre LI de la place, si vous les voulez sur une ligne.

Ajustez avec le rembourrage/marge pour obtenir l'espacement approprié entre eux, et la hauteur de ligne pour obtenir un comportement correct pour toute éventuelle 2e ligne.

De cette façon, vous n'aurez pas de problème avec votre UL ne prend pas de place, sans avoir besoin d'un élément clair caché à la fin de la liste (qui est votre autre alternative)

Source

2008-11-11 16:28:57 jishi

Un grand merci Jishi! Votre suggestion a très bien fonctionné, mais maintenant il est scindant certains des liens sur plusieurs lignes - à savoir, car il est maintenant texte en ligne qui est emballage. Y a-t-il un moyen de contourner ceci? –

Oui, utilisez l'espace blanc: nowrap; dans les ancres. c'est la même chose que d'envelopper le contenu dans l'obsolète '' -tag – jishi

Si vous trouvez que ma réponse est utile, veuillez la marquer comme la bonne réponse à votre question. – jishi

Vous êtes flottant vos éléments, de sorte que leur parent a besoin pour effacer/réinitialiser le flux via le clearfix « hack ».

Source

2008-11-11 16:46:39 Kon

Liste des articles transformés en float: blocs gauche ne paraissent pas dans IE6

Répondre

Questions connexes