适当的CSS来生成一个跨浏览器的复选标记
我正在使用以下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： 
有没有一个便携的方式来指定一个好看的复选标记，可以在所有主stream浏览器中使用？
编辑解决scheme ：我最终使用下面的一个变化meder的答案：
ul.checkmark li { background:url("../checkmark.gif") no-repeat 0 50%; padding-left: 20px; } ul.checkmark { list-style-type: none; }
li { background:url(http://img.dovov.comcheckmark.gif) no-repeat 0 50%; }
可能是唯一的方法，你会让它在IE 8/9之前一贯的工作。
ul { list-style-image:url("/default_unchecked.png"); /* other list styles*/ }
然后通过JavaScript更改它，也许。
$('.selected').css("list-style-image", "url('http://img.dovov.comblueball.gif')");
嗯，如果去一个小图像，那么你会得到完全兼容性几乎每个浏览器
或者看看这个过去的问题勾号符号在HTML / XHTML
我不确定是否还有人需要支持IE8，但我想知道为什么IE8创build这些盒子，所以我search了互联网，发现这个post： 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>
我意识到这是一个旧的post，但随着屏幕尺寸和像素密度在移动设备上的多种变化，我认为最好的办法是用像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>
