Identité de l'image "list-style-image" dans Opera via CSS

Opera a un rendu inacceptable du positionnement image-balle des éléments de la liste. Look at demo page with Opera and different browser.Identité de l'image "list-style-image" dans Opera via CSS

Style:

/* body {line-height:150%;} */ 
ul {list-style: none outside url('img/bullet-lilac.gif');

HTML échantillon:

<ul> 
    <li><a href="">Ut enim ad minim veniam</a></li> 
    <li>Sample item</li> 
</ul>

Puces à Opera sont en retrait vers le haut de la ligne. C'est dommage. Y at-il des solutions de certains types de hacks?

Pas intéressé par les astuces background-image.

Capture d'écran. Opera sur fond, Chrome au premier plan

List with different browsers

Source

2010-10-10 Andrew Rumm

Je ne peux pas reproduire le bogue que vous essayez de résoudre sur Opera 10.61 sous Linux. Pouvez-vous poster une capture d'écran ou quelque chose? –

Question mise à jour avec capture d'écran. –

a confirmé le comportement dans la dernière version d'Opera (11.0) – karlcow

ajouter un line-height (en em) sur le li (vous devrez essayer différentes valeurs pour trouver la bonne)
maintenant les balles sont centrées, mais les lis se chevauchent
ajouter padding:X 0; sur le li où X est une valeur en em

dans votre cas, voici le emended css:

ul {list-style: none outside url('http://rayz.ru/misc/askdev/list-style-image/pic1.gif')} 
li {line-height:0.8em;padding:0.3em 0}

Quelle version Opera (s) ciblez-vous? (Si OP11 est utilisé, utiliser this hack)

Source

2011-01-24 18:02:15 Knu

sûr, Opera 11. –

Votre suggestion semble cool pour un éléments de liste non-multilined. Donc, j'ai besoin d'ajouter plus de contenants pour que ça ressemble à d'autres navigateurs. –

http: // rayz.ru/misc/askdev/list-style-image/list2.html –

Je ne connais pas le problème particulier que vous décrivez, et je ne sais pas s'il y a une solution spécifique pour, mais une solution de contournement est d'utiliser background-image/background-position qui est plus facile à affiner:

li { 
    background-image:url(img/bullet-lilac.gif); 
    background-position: left center; 
    }

(Vous aurez besoin d'une certaine quantité de padding-left pour faire place à la balle)

Source

2010-10-10 21:18:54

Je connais cette solution. Mais je suis intéressé par un autre. Avec 'list-type-image' –

, RayZ a probablement besoin d'une image de fond à d'autres fins, mais Knu a donné une solution rapide et efficace. Je l'ai vérifié et ça fonctionne comme le charme. – David

Appuyer la suggestion de Knu. L'utilisation de li{ line-height:.95em; padding-bottom:10px; } a fourni des résultats assez cohérents dans mes tests, bien que vous souhaitiez ajuster ces valeurs un peu. Je suggère également de remplacer «none» par une autre valeur de type list-style pour éviter un problème d'affichage dans Opera 11. Tant que l'image est disponible sur le serveur, le disque ne devrait pas apparaître.

Source

2011-01-25 10:43:54 webinista

Identité de l'image "list-style-image" dans Opera via CSS

Répondre

Questions connexes