it-swarm.dev

Wie kann ich die Geschossgröße in einem Li erhöhen?

Die Aufzählungszeichen in IE8 sind so klein, dass ich versucht habe, die Schriftgröße zu ändern, aber das hat nicht funktioniert.

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

Gibt es eine Möglichkeit, dies zu tun, ohne ein Bild für die Kugel zu verwenden?

22
user964104

Sie könnten dies in einem IE8-bedingten Kommentar tun ...

ul {
   list-style: none;
}

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

jsFiddle .

Im IE7 können Sie das Aufzählungszeichen per JavaScript voranstellen und entsprechend anpassen.

39
alex

Internet Explorer scheint die Größenanpassung der Aufzählungszeichen von list-style-type mit font-size nicht nativ zu unterstützen, da Firefox und Chrome erscheinen. Ich weiß nicht, ob dies ein bekanntes Problem oder ein Fehler ist. 

Es gibt Problemumgehungen, aber manchmal ist ein Image das schnellste und weiter verbreitete "Update".

2
Doozer Blake

IE8 + skaliert die Aufzählungszeichen, jedoch nicht für jede Schriftgröße.
Mein Fix basiert auf der Tatsache, dass die Kugeln für Verdana größer sind als für Arial. Ich verwende css, um Verdana für li festzulegen. Gleichzeitig füge ich zusätzliche Bereiche für li hinzu, um die ursprüngliche Schriftart zu erhalten. Da Verdana die Zeilen höher machen kann, muss ich möglicherweise die Zeilenhöhe verwenden, um das auszugleichen. Dies hängt jedoch vom Browser ab.
Ich kann auch eine größere Schriftgröße für li verwenden, um die Aufzählungszeichen noch größer zu machen, dann muss ich noch eine kleinere Zeilenhöhe verwenden. 

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