list-style-image仅显示指定图像且不缩放，需配合list-style-type提供降级方案；控制尺寸对齐应改用background-image+padding。
list-style-image 直接设置图像路径就行，但别指望它缩放
用 list-style-image 替换默认列表符号最简单的方式就是写个 url()，比如 ul { list-style-image: url("arrow.png"); }。但它只负责“显示这张图”，不控制尺寸、对齐或裁剪——图多大就显示多大，超出容器也不会自动裁掉。
常见错误现象：
- 图标太大，把文字顶到下一行
- 图片边缘被截断（尤其当
line-height小或padding不足时） - 在不同浏览器里垂直位置不一致（Firefox 和 Chrome 对 baseline 的处理略有差异）
所以它适合用在尺寸统一、已预处理好的小图标上，比如 16×16 的箭头或圆点。别拿它去塞一张 200×200 的 PNG。
为什么必须配 list-style-type？
list-style-image 失效时，浏览器不会留白，而是直接 fallback 到 list-style-type 的值。如果没声明这个属性，就会显示浏览器默认的 disc 或 decimal，视觉上突然变样，排查起来容易漏掉这个原因。
建议始终显式写上兜底：
-
ul { list-style-image: url("tick.svg"); list-style-type: none; }（图可用就用图，不可用就彻底隐藏） -
ol { list-style-image: url("num.png"); list-style-type: decimal; }（图挂了至少还能看到数字）
注意：list-style-type: none 不等于“没标记”——它只是移除符号，list-style-image 仍会尝试加载并渲染图像，只是失败后不显示任何东西。
图像加载失败时的行为和兼容性坑
当 url() 指向的路径 404、跨域被拒、或格式不被支持（比如 Safari 对某些 WebP 变体），list-style-image 就静默失效，直接启用 list-style-type。
容易被忽略的点：
- IE8 及更早版本完全不支持
inherit值，哪怕你写了也当没写 - 相对路径基于 CSS 文件位置解析，不是 HTML 页面位置 —— 如果 CSS 在
/css/main.css，而图放在/img/icon.png，就得写url("../img/icon.png") - SVG 图像在部分旧 Android WebView 中可能渲染异常，建议加
width/height内联属性或改用 PNG
真正要控制大小和间距？别用 list-style-image，改用 background-image
这是最常被低估的替代方案：去掉原生标记，用 list-style: none，再给 li 加 background-image + padding-left 模拟图标。
优势明显：
- 能用
background-size精确缩放图标 - 用
background-position调整图标和文字的垂直/水平对齐 - 多个图标可合并成雪碧图，减少请求数
- 支持
background-repeat: no-repeat避免意外平铺
示例：
li {
list-style: none;
background: url("icon-check.svg") no-repeat left center;
background-size: 14px;
padding-left: 22px;
}
这种写法自由度高，但代价是语义弱了一点——屏幕阅读器不会自动把背景图识别为列表标记，如需无障碍支持，得额外加 aria-label 或用伪元素配合 content。
