Как я могу увеличить размер пули в лите? - PullRequest
Новая
       18

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

23 голосов
/ 27 сентября 2011

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

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

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

Ответы [ 3 ]

41 голосов
/ 27 сентября 2011

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

ul {
   list-style: none;
}

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

jsFiddle .

В IE7 вы можете добавить точку с помощью JavaScript и стиляэто соответственно.

2 голосов
/ 27 сентября 2011

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

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

0 голосов
/ 22 февраля 2014

IE8 + масштабирует маркеры, но не для каждого размера шрифта.
Мое исправление основано на том факте, что маркеры для Verdana больше, чем для 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>
...