web-dev-qa-db-fra.com

Comment puis-je augmenter la taille de la balle dans un li?

Les puces dans IE8 sont si petites que j'ai essayé de changer la taille de la police, mais cela n'a pas fonctionné . Code:

<ul style="padding:0; margin:0; margin-left:20px;">
    <li>item 1</li>
    <li>item 2</li>
</ul>

Est-il possible de le faire sans utiliser une image pour la balle?

cssinternet-explorer-8html-lists
22
user964104

Vous pouvez le faire dans un commentaire IE8 conditionnel ...

ul {
   list-style: none;
}

ul li:before {
   content: "•";
   font-size: 170%; /* or whatever */
   padding-right: 5px;
}

jsFiddle .

Dans IE7, vous pouvez préfixer la puce via JavaScript et la styler en conséquence.

39
alex

Internet Explorer ne semble pas prendre en charge de manière native le dimensionnement des puces à partir de list-style-type avec font-size comme Firefox et Chrome. Je ne sais pas s'il s'agit d'un problème ou d'un bogue connu. 

Il existe des solutions de contournement, mais une image est parfois le correctif le plus rapide et le plus largement pris en charge.

2
Doozer Blake

IE8 + redimensionne les puces, mais pas pour toutes les tailles de police.
Ma solution est basée sur le fait que les balles de Verdana sont plus grosses que celles d’Arial. J'utilise css pour définir Verdana sur li, en même temps, j'ajoute des plages supplémentaires autour du contenu de li pour conserver la police d'origine. De plus, comme Verdana peut rendre les lignes plus hautes, il se peut que je devrais utiliser line-height pour compenser cela, mais cela dépend du navigateur.
Je peux aussi utiliser une taille de police plus grande pour li pour rendre les puces encore plus grandes, puis je devrai utiliser une hauteur de ligne encore plus petite. 

ul {
    font: 12px Arial;
}
ul li {
    font-family: Verdana;
    line-height: 120%;
} /* font-size: 14px; line-height: 100%; */
ul li span {
    font: 12px Arial;
}

<ul>
    <li><span>item 1</span>
    <li><span>item 2</span>
</ul>
0
KS74