Html 用于生成跨浏览器工作的复选标记 li 的适当 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4293004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
proper CSS for generating a checkmark li that works cross-browser
提问by George Armhold
I'm using the following CSS to add checkmarks before my <li>list items:
我正在使用以下 CSS 在<li>列表项之前添加复选标记：
ul.checkmark li:before {
content:"13<ul class="checkmark">
<li>Learn the keyboard at your own pace</li>
</ul>
20";
}
And then in the HTML:
然后在 HTML 中：
ul.checkmark li {
background:url("../checkmark.gif") no-repeat 0 50%;
padding-left: 20px;
}
ul.checkmark {
list-style-type: none;
}
Works great in Safari, Firefox and Chrome, but displays "freak out boxes" on IE8.
在 Safari、Firefox 和 Chrome 中运行良好，但在 IE8 上显示“freak out boxes”。
Safari:
苹果浏览器：
IE8:
IE8：
Is there a portable way to specify a good-looking checkmark that will work in all the major browsers?
是否有一种可移植的方式来指定一个适用于所有主要浏览器的美观复选标记？
EDIT Solution: I ended up using a variation on meder's answer below:
编辑解决方案：我最终使用了以下 meder 答案的变体：
li { background:url(/images/checkmark.gif) no-repeat 0 50%; }
采纳答案by meder omuraliev
ul
{
list-style-image:url("/default_unchecked.png");
/* other list styles*/
}
Would probably be the only way you'll get it to work consistently in the IE pre 8/9.
可能是您让它在 8/9 之前的 IE 中始终如一地工作的唯一方法。
回答by Robin Maben
$('.selected').css("list-style-image", "url('/images/blueball.gif')");
then later change it via javascript, maybe.
然后稍后通过javascript更改它，也许。
ul.checkmark {
list-style-type:none;
}
ul.checkmark li:before {
content:"13<ul class="checkmark">
<li>Learn the keyboard at your own pace</li>
</ul>
20";
font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}回答by Ross
Hmmm how about going with a small image instead, then you'll get full compatibility with practically every browser
嗯，用一个小图像代替怎么样，那么你几乎可以与所有浏览器完全兼容
Alternatively take a look at this past question Tick symbol in HTML/XHTML
或者看看这个过去的问题HTML/XHTML 中的刻度符号
回答by Kodos Johnson
I'm not sure if anyone still needs to support IE8 but I wanted to find out why IE8 creates those boxes so I searched the internet and found this post: Unicode characters and Internet Explorer
我不确定是否还有人需要支持 IE8，但我想知道为什么 IE8 会创建这些框，所以我在互联网上搜索并找到了这篇文章：Unicode characters and Internet Explorer
So based on the answers to that question, it looks like you canuse the method described by the OP, you just have to specify a Unicode font to make IE8 happy. So in theory this should work fine:
因此，根据该问题的答案，您似乎可以使用 OP 描述的方法，只需指定 Unicode 字体即可使 IE8 满意。所以理论上这应该可以正常工作：
@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>
回答by dlewis22
I realize this is an old post but, with the many variations of screen sizes and pixel densities on mobile devices, I think the best approach is to convert your icon into a font with a program like Icomoon: https://icomoon.io/
我意识到这是一篇旧帖子，但是由于移动设备上的屏幕尺寸和像素密度有很多变化，我认为最好的方法是使用 Icomoon 之类的程序将您的图标转换为字体：https://icomoon.io/
Put the font files on your server and the css will look something like this.
将字体文件放在您的服务器上，css 将如下所示。
##代码##The html will be something like this:
html 将是这样的：
##代码##