chrome/edge 中 summary::marker 必须用 content 指定图标（如 "▸"），仅设 color 或 background 无效；safari 15.4 前不支持，需用 ::-webkit-details-marker 降级；firefox 支持最早但 vertical-align 默认为 middle 易错位，且不支持 transform。
summary::marker 在 Chrome / Edge 中必须用 content 替换图标
Chrome 和 Edge（Blink 内核）把 summary 默认渲染为 display: list-item，图标由 ::marker 伪元素控制，且不响应 background 或 color 直接作用于 summary 元素本身。只写 summary { color: red; } 无效，因为文字颜色可生效，但图标颜色不会变——图标是独立生成的伪元素。
真正起效的方式是：
-
summary::marker必须显式设置content，例如content: "▸"，否则旧版 Safari 可能回退到原生三角，导致样式失控 - 图标颜色、大小、对齐需通过
summary::marker单独控制，font-size和vertical-align影响其与文字的基线对齐 - 不要写
summary::marker { display: none; }—— 这会破坏屏幕阅读器对展开状态的识别，属于可访问性违规
Safari 下 ::marker 支持滞后，fallback 方案要准备
Safari 15.4 之前根本不支持 summary::marker，即使写了也完全忽略。Safari 16+ 开始支持，但仍有兼容边界：比如 content 值若含 Unicode 外字符（如 SVG data URL），可能渲染失败；margin 和 padding 在 ::marker 上多数无效。
稳妥做法是：
- 用纯 ASCII 或常见 Unicode 符号（如
"▶"、"▼"、"+"）作为content值，避免字体缺失风险 - 为 Safari 15 及更早版本提供降级样式：
summary::-webkit-details-marker { display: none; }+ 手动在summary内加<span class="icon"></span>并用 JS 控制 open 状态联动 - 测试时务必打开 VoiceOver，确认图标隐藏后仍能通过
Enter/Space触发展开
Firefox 的 marker 行为最“守规矩”，但也最易被忽略
Firefox（Gecko 内核）对 summary::marker 支持最早也最稳定，但它的默认图标是实心三角（▲/▼），且 ::marker 的 vertical-align 默认为 middle，容易和文字 baseline 错位——尤其当 summary 设了 line-height 或 font-size 不一致时。
常见错觉是“样式写了但没对齐”，实际原因往往是：
-
summary没设display: block或inline-block，导致padding和background渲染异常，间接影响::marker的定位上下文 -
summary::marker的vertical-align需配合summary的line-height调整，例如设为vertical-align: -0.1em微调 - Firefox 不支持
summary::marker的transform，想旋转图标只能换content字符（如 ▶ → ▼）
summary 文字样式生效的前提条件
文字颜色、字体、背景等看似基础的样式，在 summary 上并非总能直接生效。根本原因是：部分浏览器（尤其是旧版 Safari 和 IE）未将 summary 当作常规块级元素处理，padding 和 background 可能被截断或不渲染。
确保样式可靠生效的关键动作：
- 给
summary显式声明display: block或inline-block，这是大多数场景下padding和background生效的硬性前提 - 避免依赖
summary的默认margin，不同内核差异大；统一用margin: 0+ 自定义内边距 - 如果要用
background包裹整个标题区域（含图标位置），必须搭配padding-left预留图标空间，而不是指望::marker自带外边距
真正难的不是写样式，而是判断哪一层样式被哪个内核拦截了——::marker 是唯一可控入口，其余都得靠显式声明兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
