适当的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>