list-style-image 经常失效，因其受图片加载、尺寸定位不可控及无伪元素干预三重限制；现代推荐用 ::marker 或 background-image + list-style: none 替代。
list-style-image 在现代项目里为什么经常失效
list-style-image 看起来是定制列表图标的最直接方式，但实际用起来常出现图标不显示、缩放失真、无法对齐或响应式下错位。根本原因不是写法错，而是它受制于三个硬约束：图片必须可加载（路径错误或跨域就静默失败）、无法控制尺寸和定位（浏览器按原始宽高渲染）、且不支持伪元素级的精细干预。
- 图片路径写成相对路径时，实际解析基准是 HTML 文档位置，不是 CSS 文件位置，容易 404
-
list-style-image加载失败时，浏览器不会 fallback 到list-style-type，而是直接留白 - 它和
list-style-position: inside组合时，图标与文字垂直对齐完全不可控，尤其在多行文本中
li {
list-style-image: url("icon-check.svg");
}
用 background-image + ::marker 实现真正可控的图标列表
现在更可靠的做法是关掉原生列表标记，用 ::marker 伪元素（Chrome 89+、Firefox 89+、Safari 15.4+ 支持）或退化为 background-image + padding-left。前者语义清晰、可设尺寸颜色；后者兼容性更好，但需手动调间距。
-
::marker允许设置content、color、font-size，SVG 图标还能用url()或内联 data URL - 用
background-image时，background-size和background-position必须显式声明，否则默认居顶左、不缩放 - 记得重置
list-style: none，否则旧标记和新背景会叠加
li {
list-style: none;
padding-left: 24px;
background-image: url("check.svg");
background-repeat: no-repeat;
background-size: 16px;
background-position: 0 2px;
}
SVG 图标做 list-style-image 的坑与绕过方法
把 SVG 当 list-style-image 用，看似轻量，实则埋雷最多：内联 SVG 不被支持（仅外部文件）、外部 SVG 若含 或未指定 viewBox，渲染结果可能空白或拉伸。
- 不要用
data:image/svg+xml,编码字符串——多数浏览器不认这个作为list-style-image的值 - 外部 SVG 文件必须是纯图形，去掉所有 XML 声明、注释、
根和路径 - 更稳妥的是把 SVG 转成字体图标或用
mask配合background-color，这样颜色可随主题切换
比如这个精简后的 SVG 才能稳定工作：
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg>
IE 和老安卓 WebView 下怎么保底
list-style-image 在 IE9+ 和 Android 4.4 WebView 中虽支持，但不支持 SVG，只认 PNG/GIF。这时候不能只靠一个方案，得叠一层降级逻辑：
- 先写
list-style-type: disc保底，再用list-style-image覆盖（支持者生效，不支持者回退） - 对 SVG 图标，同时提供 PNG 版本，用
@supports (list-style-image: url(a.png))区分 - 更彻底的写法是用 JS 检测
getComputedStyle(document.createElement('li')).listStyleImage是否返回非none
简单保底示例：
li {
list-style-type: disc;
list-style-image: url("icon-check.png");
}
@supports (list-style-image: url("icon-check.svg")) {
li {
list-style-image: url("icon-check.svg");
}
}
真正麻烦的不是换哪种方案，而是同一份列表在 PC、iOS、Android 旧版、微信内置浏览器里，::marker、background-position 偏移量、SVG 渲染精度全都不一样——得留出至少两套微调值，别指望一次写完就能横跨所有环境。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
