Как увеличить размер пули в ли?

Пули в IE8 настолько малы, что я попытался изменить размер шрифта, но это не сработало. Код:

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

Есть ли способ сделать это без использования изображения для пули?

Ответы

Ответ 1

Вы можете сделать это в условном комментарии IE8...

ul {
   list-style: none;
}

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

jsFiddle.

В IE7 вы можете добавить пулю через JavaScript и соответствующим образом подстроить ее.

Ответ 2

Internet Explorer, похоже, не поддерживает размер палитр от list-style-type с помощью font-size, как кажется Firefox и Chrome. Я не знаю, является ли это известной проблемой или ошибкой.

Существуют обходные пути, но иногда изображение является самым быстрым и широко поддерживаемым "исправлением".

Ответ 3

IE8 + масштабирует маркеры, но не для каждого размера шрифта.
Мое решение основано на том, что пули для Верданы больше, чем для Arial. Я использую css для установки Verdana для li, в то же время я добавляю дополнительные промежутки вокруг содержимого li, чтобы сохранить исходный шрифт. Кроме того, поскольку Verdana может сделать линии выше, мне может понадобиться использовать высоту линии, чтобы компенсировать это, но это зависит от браузера. Также я могу использовать больший размер шрифта для li, чтобы сделать пули еще большими, тогда мне придется использовать еще меньшую высоту строки.

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>