用 background-image 替代 list-style 实现跨浏览器一致的列表符号：SVG 背景图 + background-position: left 0.35em center + padding-left: 1.5em，IE11 需双重 URL 编码。
ul/li 默认列表符号缩进不一致
不同浏览器对 list-style-position 的默认处理不同，ul 和 li 的缩进、行高、padding-left 实际渲染效果经常错位——尤其在 Chrome/Firefox/Safari 混合环境下，文字和圆点/数字的垂直对齐、水平间距肉眼可见地漂移。
直接改 list-style-type 或调 margin-left 只会让问题更隐蔽： Safari 可能吃掉部分 padding，Firefox 对 list-style-image 的基线对齐又和 Chrome 不一样。
- 用
list-style: none彻底剥离原生符号 - 把符号转成背景图，用
background-image+background-position精确控制位置 - 统一用
padding-left预留符号空间，避免文字被遮挡或挤到右侧
用 background-image 模拟圆点且垂直居中
原生 disc 在小字号（如 12px）下边缘模糊、粗细失真，换成 SVG 背景图既能抗锯齿，又能通过 background-size 和 background-position 锁定对齐基准点。
关键不是“怎么画个圆”，而是“怎么让它不随字体变化跑偏”——必须用 background-position: left 0.35em center 这类相对单位，0.35em 是经验偏移值（适配 14–16px 字号），center 才真正实现垂直居中，比 top 或像素值可靠得多。
立即学习“前端免费学习笔记（深入）”；
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23333'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: left 0.35em center;-
padding-left: 1.5em;（预留空间，确保文字不顶到符号）
IE11 兼容时 SVG base64 要 URL 编码两次
IE11 解析 data URI 时会多解一层，如果只做一次 % 编码，SVG 标签里的 、<code>>、' 会直接崩成空白或报错 SyntaxError: Invalid character。
别信在线编码工具默认选项——必须确认它执行了双重编码（比如 → <code>%253C，不是 %3C）。本地调试时，打开 IE11 开发者工具 → Network → 查看实际请求头里的 background-image 值，看到 %253Csvg 才算对。
- 用 Node.js 的
encodeURIComponent(encodeURIComponent(svgString))最稳 - 纯手写？先 encode 一遍，再把结果里的
%替换为%25 - 避开 IE 的话，现代浏览器用单层编码 +
url("...")就够
伪元素方案比 background 更灵活但有陷阱
用 ::before 插入 content: "•" 看似简单，但 Unicode 圆点（\2022）在不同字体里宽度、高度、上下间距差异极大，微软雅黑和 Helvetica 下同一行 li 的基线可能差 2px。
更麻烦的是，::before 默认是 inline 元素，vertical-align 设 middle 在某些行高下仍会浮动；设 display: inline-block 后又得手动调 line-height 和 top 偏移，一换字体全得重调。
- 优先用 SVG 背景图，可控性远高于字符
- 若必须用伪元素，
content改用内联 SVG：content: url("data:image/svg+xml,...");（注意同样要双编码） - 禁用
font-family继承，显式声明font-family: sans-serif;防止系统字体干扰符号尺寸
background-position 的 em 偏移量、SVG 编码层级、以及是否禁用用户字体继承里。漏掉其中任意一环，都可能让“看起来差不多”变成“上线后集体偏移”。 
