放弃原生列表样式，用 li { position: relative; padding-left: 1.5em; } 和 li::before { content: "•"; position: absolute; left: 0; top: 50%; transform: translatey(-50%); } 手动绘制图标，兼容性最好、控制最精准。
ul/li 默认列表项图标位置不一致怎么办
浏览器对 list-style-position 的解析有差异，尤其在缩进、行高、字体变化时，::marker 和伪元素表现不统一。直接改 list-style 很难精准控制图标与文本基线的对齐。
- Chrome 115+ 支持
::marker，但 Safari 16.4 才开始有限支持，老版本 iOS Safari 完全忽略 -
list-style-position: inside会让文本换行后顶到图标下方，破坏阅读流 - 用
background-image模拟图标时，background-position在不同line-height下偏移量不可控
用 ::before 伪元素手动绘制图标更可靠
放弃原生列表样式，把 ul 设为 list-style: none，每个 li 用 ::before 绘制图标并精确定位——这是目前兼容性最好、控制粒度最细的做法。
- 图标用
content: "•"或 SVG data URL，避免字体缺失问题 - 用
position: absolute+top: 0.25em对齐文本中线（不是基线），比vertical-align更稳定 -
li必须设position: relative，否则::before会相对父容器定位 - 留出左侧 padding，防止文字和图标重叠，推荐
padding-left: 1.5em
li {
position: relative;
padding-left: 1.5em;
}
li::before {
content: "•";
position: absolute;
left: 0;
top: 0.25em;
font-size: 0.8em;
}
SVG 图标做伪元素内容时要注意尺寸继承
直接把 SVG 写进 content（如 content: url("data:image/svg+xml,...")）会导致图标大小受 font-size 影响异常，且部分浏览器不渲染。
- 改用
background-image+background-size: contain更可控 - 如果坚持用
content: url()，必须显式设置width/height，且单位建议用px避免缩放失真 - SVG 中不要用
em或%定义尺寸，全部转为px或viewBox精确控制
移动端多行列表项图标错位怎么微调
当 li 内容换行、或用了 flex 布局时，::before 的 top 值容易失效——因为 line-height 和实际行高不一致。
- 优先用
top: 50%+transform: translateY(-50%)垂直居中，它基于元素自身高度计算，不受行高干扰 - 若需对齐第一行文字中线，用
top: 0.15em（比0.25em更保守，适配小字号） - 在 iOS Safari 上测试时，加上
-webkit-font-smoothing: antialiased可减少因字体渲染导致的视觉偏移
top 值没有银弹，得看字体、字号、行高组合；真正要稳，就得在关键设备上实测，而不是只信理论值。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
