根本原因是各浏览器引擎对::marker支持的CSS属性范围不同：Chrome 110+才稳定支持font-size，Safari 16.4+才支持font-weight，Firefox基本忽略font-family；color是唯一全兼容属性，但可能继承body默认灰度值而非预期色值；margin、padding、background、border、display、transform、line-height及content中url()/attr()/HTML片段等均被静默丢弃；验证方式为getComputedStyle(el, '::marker').content返回非空字符串才表示基础支持；兜底应采用list-style: none+::before，需注意避免符号叠加、精确对齐及多行垂直定位问题。
为什么::marker在Chrome/Firefox/Safari里表现不一致
根本不是写法问题，而是各引擎对::marker的属性支持清单不同：Chrome 110+ 才稳定支持font-size，Safari 16.4+ 才认font-weight，Firefox 对font-family基本忽略；color是唯一全通属性，但若父级li没设color，它可能继承body的灰度值而非你预期的色值。
哪些CSS属性在::marker里绝对别碰
浏览器解析器会静默丢弃这些声明，不报错也不渲染：
-
margin、padding、background、border——符号间距和背景必须靠li自身缩进或::before模拟 -
display（包括inline-block）、transform、line-height——::marker不是独立盒子，无法脱离原生布局流 -
content里用url()、attr()、HTML片段或拼接表达式——只接受纯字符串、counter()、counters()三类
如何验证目标环境是否支持::marker
别猜，直接运行这行代码：
getComputedStyle(document.querySelector('li'), '::marker').content
返回"none"或空字符串，说明浏览器压根不识别该伪元素；返回""•""之类才代表基础支持可用。注意：Electron 旧内核（如 VS Code 1.7x）、iOS Safari ≤15.3、微信内置浏览器均返回"none"。
立即学习“前端免费学习笔记（深入）”；
兼容性兜底时怎么写::before才不翻车
用::before接管比硬扛::marker更可控，但需绕过三个坑：
- 必须给
li加list-style: none，否则原生符号和伪元素叠加显示 -
position: absolute时，left值要配合padding-left手动对齐，比如left: -1.2em+padding-left: 1.8em - 多行文本下
line-height影响::before垂直位置，稳妥做法是改用display: flex：li { display: flex; align-items: flex-start; }，再让::before用flex: none固定宽度
真正麻烦的不是写法本身，而是符号与文字之间的水平间距——这个距离由浏览器 UA 样式硬编码，::marker和list-style-type都调不了，只有::before配合left/margin能精确控制。
