Comment faire une liste compatible avec les navigateurs croisés avec une image de style liste correctement?

Question

je dois faire de la conception comme celui-ci,

pour que cela soit possible i utilisé la ligne en pointillé comme arrière-plan de li et + icône comme une liste de style image. mais ce n'est pas la même chose dans tous les navigateurs.

<ul> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    <li>item 4</li> 
    <li class="last">item 5</li> 
</ul> 

IE7 et 6, il cherche comme ça

Answer 1

Vous devez modifier l'image il est donc la hauteur d'un li, et il a (transparent) rembourrage dans le cadre de l'image. Il semble impossible (ou très difficile) de contrôler la position de l'image cross-browser.

Answer 2

Il suffit d'utiliser un image d'arrière-plan plutôt qu'un list-style-image. L'inconvénient de ceci est que la 2ème et toutes les lignes de texte suivantes seront également complétées.

li { 
    list-style: none; 
    background: url(path-to-image) no-repeat left center; 
} 

Answer 3

Avez-vous essayez de définir une line-height (ou padding haut et en bas) sur le LIs exclusivement pour IE6 et 7 pour centrer verticalement sur l'icône [+]?
Une réinitialisation css devrait corriger l'indentation - si elle n'utilise pas seulement text-indent (ou une marge gauche ou padding-gauche).

Vous pouvez utiliser *+html li {} pour cibler IE7 et * html li {} pour IE6.

Answer 4

Cela a fonctionné pour moi:

li{list-style-image: url(/images/list.png);_list-style-image: url(/images/list2.png);} 

où il est LIST1 l'original 12x12 (px), liste2 20x15 (px) transparente et placée en bas à gauche. Maintenant, j'ai la même vue dans tous les gekos et c'est à dire. =)

Vous devez aller tester la taille de la deuxième image, car la taille varie en fonction de nombreuses choses.