Html 用于生成跨浏览器工作的复选标记li的正确CSS

我正在使用以下CSS在我的

列表项之前添加复选标记：

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

然后在HTML中：

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

---

嗯，不如换成一个小图像，这样你就可以完全兼容几乎所有的浏览器了

或者看看这个过去的问题

这可能是你在8/9之前的IE中让它始终如一工作的唯一方法

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

然后再通过javascript更改它，也许

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

---

我意识到这是一篇老文章，但由于移动设备上的屏幕大小和像素密度有很多变化，我认为最好的方法是使用Icomoon这样的程序将图标转换成字体：

将字体文件放在服务器上，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>

---

我不确定是否还有人需要支持IE8，但我想知道为什么IE8会创建这些框，所以我搜索了互联网，找到了以下帖子：

因此，根据这个问题的答案，看起来你可以使用OP描述的方法，你只需要指定一个Unicode字体就可以让IE8满意。因此，从理论上讲，这应该很好：

ul.checkmark{
列表样式类型：无；
}
李：之前{
内容：“\2713\0020”；
字体系列：“Lucida Sans Unicode”，“Arial Unicode MS”，Arial；
}

按照自己的节奏学习键盘

我经常使用这种技术，在IE中也很好。请在这里找到一篇关于使此解决方案向后兼容的文章：刚刚在Google上找到了您的答案。答案中的javascript部分不是必需的。问题只是问如何在

列表中用复选标记替换项目符号。它没有提到任何关于添加选定的

样式的内容。不管怎样，我都同意，因为你是唯一一个提到使用
列表风格图像的人，你可能就在这里。当时，这是我知道的将默认状态更改为“选中”状态的唯一方法。让我看看我能不能把答案写得更好。谢谢。由于背景图像允许的灵活性，在一个跨度内使用包含li内容的背景图像仍然是一种优越的方法。列表样式的图像项目符号无法调整，并且通常不会位于文本旁边的所需位置。您可能希望使用像素代替背景位置
0 50%
而不是将复选标记定位在中心（50%），否则，当列表项中有多行时，它也将居中。
@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";
}

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