list-style-image 经常不生效的根本原因是浏览器渲染依赖父元素 display 和 list-style-position，且路径错误、尺寸不当或加载失败均静默降级为默认圆点；推荐改用兼容性良好的 ::marker 伪元素替代。
list-style-image 为什么经常不生效
根本原因是浏览器对 list-style-image 的渲染依赖于父元素的 display 和 list-style-position，且图片路径、尺寸、加载失败都会静默降级为默认圆点——你根本看不到报错。
- 必须确保
<li>是块级元素（display: list-item），如果父<ul></ul>被设了display: flex或display: grid，list-style-image直接失效 - 图片路径写相对路径时，以 CSS 文件所在位置为基准，不是 HTML 页面位置；用
url(./icon.png)却把图片放在 HTML 同级目录下，就会 404 且无提示 - 图片尺寸过大时，部分浏览器（尤其是 Safari）会自动缩放或裁剪，导致显示异常；建议控制在 12×12px 到 20×20px 范围内
替代方案：用 ::marker 伪元素更可控
::marker 是现代标准中真正能精准定制列表符号的方式，支持内容替换、颜色、字体甚至 SVG 内联，兼容性已覆盖 Chrome 86+、Firefox 89+、Safari 15.4+。
- 它不依赖外部图片加载，避免网络失败导致回退
- 可以写成
content: "•"; color: #ff6b6b;或content: url("data:image/svg+xml,..."); - 注意：不能和
list-style-image混用，后者会被前者完全忽略
li::marker {
content: "→";
color: #4a6fa5;
font-weight: bold;
}
SVG 图标做 list-style-image 的实操要点
想用 SVG 替代 PNG/JPG 做圆点，最稳妥的方式是转成 data URL，彻底避开路径和跨域问题。
- 把 SVG 转义后嵌入 CSS：
list-style-image: url("data:image/svg+xml,%3Csvg...%3E"); - 务必对
、<code>>、"等字符做 URL 编码，否则解析失败且不报错 - 内联 SVG 不支持外部引用（比如
<use href="..."></use>），所有图形需写成完整<svg></svg>结构
li {
list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4' fill='%234CAF50'/%3E%3C/svg%3E");
}
移动端和高 DPI 屏幕下的常见偏差
用像素单位固定图标的 list-style-image 在 Retina 屏上会模糊，而 ::marker 中的 SVG 天然清晰，但仍有细节要注意。
- 如果坚持用图片，至少提供 2x 版本并配合
image-set()（仅 Safari / Chrome 支持）：list-style-image: image-set(url(icon.png) 1x, url(icon@2x.png) 2x); -
::marker中用em或rem单位控制大小更安全，比如font-size: 0.8em;，能随文字缩放同步变化 - Android WebView 对
::marker支持仍不稳定，如需兼容旧版，得 fallback 到 background + padding 模拟
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
