list-disc仅设置list-style-type:disc，不控制缩进、对齐、间距或符号大小；需手动配合pl-类统一缩进，并用::marker或list-none+::before实现可控自定义。
list-disc 只是开关，不是排版终点
list-disc 仅设置 list-style-type: disc，它不控制缩进、对齐、间距或符号大小。浏览器默认的 ul 缩进（padding-left）在 Chrome、Firefox、Safari 中数值不同，直接加 list-disc 后常出现列表文字和段落文本左缘错位。
必须手动配 pl- 才能统一：
- 常见搭配是 pl-5 或 pl-6，但需结合字体大小调整（text-sm 下 pl-4 更稳）
- 若用了 list-inside，pl- 要减小（如 pl-2），否则符号+文字整体右偏
- 嵌套 ul 不继承父级缩进，内层需单独加 pl-4 等类
::marker 伪元素才是可控自定义入口
Tailwind 本身不提供 ::marker 的预设工具类，但你可以直接写 CSS 或用 @layer utilities 注入。它比 list-image 兼容性更好（Chrome 86+、Firefox 68+、Safari 15.4+ 支持），且支持颜色、字号、甚至简单变换。
实操要点：
- ol li::marker 和 ul li::marker 都可选中，但不能跨标签类型复用样式
- 改颜色用 color: #3b82f6，改大小用 font-size: 1.1em，别用 transform: scale()（会破坏基线对齐）
- 想隐藏原生符号再用 ::before 插图标？先加 list-none，否则双符号并存
- ::marker 不支持背景图、SVG 内联或 content，复杂图标仍得走 ::before + list-none
list-image 在 Safari 里失效的三个硬伤
list-image 看似方便，但在 Safari（尤其 v17.4 及更早）中极易翻车。它不是“不支持”，而是解析规则极严：
常见失败原因：
- 忘记配 list-style-type: none → Safari fallback 到默认圆点，新旧符号叠在一起
- data URL 里含未转义空格、、>、引号 → 整个 URL 被当无效值丢弃
- 使用单引号包裹 data URL 字符串 → Safari 只认双引号或无引号（Tailwind 编译后通常自动处理，但手写时易错）
- 设置了 list-style-position: inside → 图标位置偏移，误判为“没生效”
结论：除非项目明确不兼容 Safari，否则优先用 ::marker 或 ::before + list-none 组合。
自定义 SVG 符号必须走 list-none + ::before
想用箭头、勾选、图标等替代原生符号，list-none 是强制前置条件。不加它，老浏览器（IE、旧 Safari）或部分 Android WebView 仍会渲染默认圆点。
关键细节：
- list-none 不影响 pl-，缩进需单独加（如 pl-6），否则图标紧贴左边界
- ::before 中用 content-["→"] 最简，但中文/图标字体需确保能正确渲染
- 若用 SVG 图标，推荐转成 data URL 并填入 bg-[url(...)] + inline-block w-4 h-4 align-text-bottom，比 content 更可控
- align-text-bottom 比 flex items-end 更轻量，避免破坏行高继承
真正麻烦的从来不是“怎么加符号”，而是“怎么让符号和文字在所有尺寸、所有字体、所有浏览器里看起来像一个整体”。list-disc 只负责声明类型，其余全是手工校准——缩进、基线、行高、响应式断点，一个都不能少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
