правильный CSS для создания галочки li, который работает кросс-браузерно

Question

Я использую следующий CSS для добавления галочек перед моими <li> элементами списка:

ul.checkmark li:before {
    content:"\2713\0020";
}

А потом в HTML:

<ul class="checkmark">
   <li>Learn the keyboard at your own pace</li>
</ul>

Прекрасно работает в Safari, Firefox и Chrome, но отображает «чокнутые коробки» в IE8.

Safari:

IE8:

Существует ли переносимый способ указания привлекательной галочки, который будет работать во всех основных браузерах?

РЕДАКТИРОВАТЬ Решение : В итоге я использовал вариант ответа медера ниже:

ul.checkmark li {
    background:url("../checkmark.gif") no-repeat 0 50%;
    padding-left: 20px;
}

ul.checkmark {
    list-style-type: none;
}

Answer 1

li { background:url(/images/checkmark.gif) no-repeat 0 50%; }

Вероятно, это будет единственный способ заставить его работать последовательно в IE до 8/9.

Answer 2

ul
{
    list-style-image:url("/default_unchecked.png");
    /* other list styles*/
 }

затем позже измените его с помощью javascript, может быть.

$('.selected').css("list-style-image", "url('/images/blueball.gif')");

Answer 3

Хм, а как насчет небольшого изображения, тогда вы получите полную совместимость практически с каждым браузером

В качестве альтернативы взгляните на этот предыдущий вопрос Символ галочки в HTML / XHTML

Answer 4

Я не уверен, что кому-то все еще нужна поддержка IE8, но я хотел выяснить, почему IE8 создает эти блоки, поэтому я искал в Интернете и нашел этот пост: Unicode-символы и Internet Explorer

Итак, основываясь на ответах на этот вопрос, похоже, что вы можете использовать метод, описанный в OP, вам просто нужно указать шрифт Unicode, чтобы сделать IE8 счастливым. Так что в теории это должно работать нормально:

ul.checkmark {
    list-style-type:none;
}
ul.checkmark li:before {
    content:"\2713\0020";
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}

<ul class="checkmark">
    <li>Learn the keyboard at your own pace</li>
</ul>

Answer 5

Я понимаю, что это старый пост, но, учитывая множество вариаций размеров экрана и плотности пикселей на мобильных устройствах, я думаю, что лучший подход - преобразовать ваш значок в шрифт с помощью программы, такой как Icomoon: https://icomoon.io/

Поместите файлы шрифтов на свой сервер, и CSS будет выглядеть примерно так.

@font-face {
    font-family: 'IcoMoon-Free';
    src: url('/fonts/IcoMoon-Free.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.icon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'IcoMoon-Free' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Enable Ligatures ================ */
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-checkmark:before {
    content: "\ea10";
}

HTML будет примерно таким:

<span class="icon icon-checkmark"></span>