用于生成跨浏览器的复选标记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上显示"怪异的盒子".

苹果浏览器:

IE8:

是否有一种可移植的方式来指定一个好看的复选标记,可以在所有主流浏览器中使用？

编辑解决方案:我最终使用了meder的答案变体如下:

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')");