生成跨浏览器可用的勾选符号li所需的适当CSS

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:

有没有一种能够在所有主流浏览器中使用且外观漂亮的复选标记的可移植方法？

编辑解决方案： 最终我采用了meder的答案变体。

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

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

- George Armhold

---

你可以考虑使用像素代替背景位置0 50%，以便在列表项中有多行时，勾选标记不会居中显示。 - Tanel Jõeäär

Answer 1

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

可能是唯一的方法，可以让它在IE 8/9之前的版本中保持一致性。

- meder omuraliev

---

我经常使用这种技术，在IE中效果很好。 - Moses

Answer 2

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

然后，也许稍后通过 JavaScript 进行更改。

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

- Robin Maben

---

刚刚在谷歌上看到了你的答案。你回答的JavaScript部分并不必要。问题只是询问如何在<ul>列表中将圆点替换为复选标记，并没有提及添加“selected”样式的任何内容。我还是给它点赞了，因为你是唯一一个提到使用“list-style-image”的人。 - Cave Johnson

@KodosJohnson 你可能是对的。当时，那是我所知道的将默认状态更改为“已选中”状态的唯一方法。让我看看能否改进答案。谢谢。 - Robin Maben

使用带有li内容的背景图像和span仍然是优越的方法，因为背景图像允许更大的灵活性。列表样式图像符号无法调整，并且通常不会在所需位置旁边与文本对齐。 - Figjeti

Answer 3

如果您使用小图像，那么几乎每个浏览器都可以完全兼容。或者，您可以查看这个过去的问题HTML / XHTML中的勾选符号

- Ross

---

请在此处找到一篇关于如何使该解决方案向后兼容的文章：https://css-tricks.com/put-checkmarks-next-to-visted-links-with-pure-css/ - chocolata

Answer 4

我不确定是否有人仍然需要支持IE8，但我想找出为什么IE8会创建那些框，所以我在互联网上搜索并找到了这篇文章：Unicode characters and 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>

- Cave Johnson

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>

- dlewis22