iOS Chrome 87版自定义list-style样式不生效问题咨询

• 自定义字符串类list-style-type是CSS Counter Styles Level 3规范特性。iOS 14早期版本的WebKit内核存在实现缺陷：对4字节Unicode字符（如emoji）、组合型特殊符号（如带变体选择符的箭头）无法正确渲染，会直接回退为默认实心圆点标记。iOS端87版本Chrome基于iOS 14早期WKWebView实现，恰好命中该缺陷，和li元素的display: list-item配置无关联。
• list-style-image的跨端实现逻辑存在差异：桌面端Chrome会自动适配引用的SVG尺寸到原生标记区域，iOS WKWebView要求列表图片必须有明确固定宽高、无外部资源依赖，否则会直接跳过图片渲染，回退为默认列表样式。

放弃依赖原生列表属性的跨端兼容性，改用伪元素实现自定义列表标记，可完全规避内核渲染差异，保证两端效果统一：

• 第一步：给所有li设置list-style: none;，彻底移除原生默认圆点标记
• 第二步：用li的::before伪元素承载自定义标记：
  • 直接把对应符号、emoji写入伪元素的content属性，或是把SVG作为伪元素的background-image
  • 通过margin、vertical-align调整标记位置，和文本保持对齐
• 该方案不依赖浏览器对list-style原生属性的特殊支持，所有终端渲染逻辑完全统一。

如果坚持使用原生列表属性实现：

• 升级iOS端Chrome到100及以上版本（对应iOS 15以上的WebKit内核，已修复自定义list-style-type的渲染缺陷）
• 给list-style-image引用的SVG明确设置16px宽、16px高的固定尺寸，满足iOS WKWebView的图片渲染要求

内容的提问来源于stack exchange，提问作者Tzu Yin Wang