flottant éléments de liste largeur variables sans contenu enveloppent

Je vais avoir un peu de mal avec ce se comportent exactement comme je veux dans tous les navigateurs, mais je vous jure que je l'ai déjà fait:flottant éléments de liste largeur variables sans contenu enveloppent

<!html> 
<head> 
    <style type="text/css"> 
    div { width:300px; } 
    ul { list-style:none; margin:0; padding:0; } 
    li { margin:0.25em 0.5em 0.25em 0; background:transparent url(http://cdn.iconfinder.net/data/icons/basicset/pencil_16.png) no-repeat scroll 0 0; float:left; } 
    a { padding-left:24px; } 
    </style> 
</head> 
<body> 
<div> 
    <ul> 
     <li><a href="/">Amazon</a></li> 
     <li><a href="/">Barnes &amp; Noble</a></li> 
     <li><a href="/">Books-A-Million</a></li> 
     <li><a href="/">Borders</a></li> 
     <li><a href="/">Indie Bound</a></li> 
     <li><a href="/">Powell's</a></li> 
    </ul> 
</div> 
</body>

Ce look bien et dandy dans la plupart des navigateurs modernes, mais dans IE 6 et 7, le "Books-A-Million" encapsule. Je souhaite que les éléments de liste aient une largeur et un emballage variables sur de nouvelles lignes, mais que les liens à l'intérieur ne soient pas encapsulés. Je ne peux pas comprendre la combinaison magique des types d'affichage et des hacks de navigateur CSS pour le faire fonctionner. Quelqu'un a-t-il déjà abordé ce problème?

Source

2010-07-14 dmrnj

Ajouter white-space: nowrap; aux a balises

Source

2010-07-14 13:55:37 ScottS

Merci pour la réponse. J'ai essayé ceci, mais même si le lien Books-A-Million est maintenant forcé à la ligne suivante, le lien Indie Bound perd son remplissage et apparaît maintenant sur l'icône d'arrière-plan. – dmrnj

Ajoutez 'display: inline-block;' ou un autre déclencheur 'hasLayout' à la balise' a' (en supposant que cela ne gâche rien d'autre). Si cela provoque des problèmes dans d'autres navigateurs (je ne pense pas que ce sera le cas), alimentez votre IE un 'zoom: 1' à la place par le biais de vos moyens préférés de ciblage IE. – ScottS

flottant éléments de liste largeur variables sans contenu enveloppent

Répondre

Questions connexes