summary::marker 是唯一可靠入口，用于控制折叠指示符，现代浏览器已支持，必须用 content 替换默认三角，禁用 display: none，推荐 data URL 编码 SVG 图标，避免内联 SVG 带来的可访问性与布局问题。
summary::marker 是唯一可靠入口
直接写 summary { background: url(icon.svg) } 或用 ::before 插入图标，大概率会错位、覆盖热区、破坏键盘可访问性。浏览器对 summary 的原生行为封装极深，真正能稳定干预的只有 summary::marker 这个伪元素——它专为控制折叠指示符而存在，现代 Chrome 125+、Firefox 129+、Safari 16.4+ 都已支持。
必须用 content 替换默认三角，不能只改颜色或字体大小；否则旧版 Safari 可能回退显示原生箭头，造成双图标叠加。
summary::marker { content: "▶"; font-size: 1.1em; color: #007bff; }summary[open]::marker { content: "▼"; }- 别写
display: none—— 这会让部分读屏软件无法感知展开状态 - 若需隐藏图标只留文字，用
content: ""+ 调整padding-inline-start补偿空白
用 inline SVG 替代纯文本图标更可控
纯 Unicode 符号（如 ▶）缩放易糊、颜色继承不稳定，尤其在高 DPI 屏幕或动态主题下。最稳妥的方式是把 SVG 直接塞进 summary::marker 的 content 里，但注意：CSS 的 content 不支持嵌入完整 SVG 标签，只能用 data URL 编码。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用最小化 SVG（比如
<svg viewBox="0 0 10 10"><path d="M2 3l3 3 3-3"/></svg>）转成 data URL：url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10'%3E%3Cpath d='M2 3l3 3 3-3'/%3E%3C/svg%3E") - 在
summary::marker中设content: ""，再用background+padding-inline-start推出空间 background-size: contain; background-repeat: no-repeat; background-position: center left;- 避免用
background-image加固定尺寸——summary默认是list-item，Safari 下定位容易漂移
为什么不要在 summary 里直接写 <svg>
有人图省事，在 HTML 中直接这样写：<summary><svg>...</svg> 标题</summary>。这看似简单，但会触发三个实际问题：
- 图标和文字基线不对齐，不同字体下
vertical-align行为不一致，靠margin-top微调不可靠 - SVG 默认可聚焦，键盘 Tab 时焦点可能落在图标上，打断用户从标题直接跳到内容的流程
- 若没加
focusable="false"和正确aria-hidden="true"，读屏器可能重复朗读图标（“空白图形”），干扰语义 - 移动端点击热区变窄——原生
summary的点击区域包含文字+图标区域，内联 SVG 会挤占空间，导致边缘点击失效
真要用 inline SVG，务必套一层 span 包裹，并设 role="presentation" 和 aria-hidden="true"，同时给 svg 加 focusable="false"。
兼容旧 Safari 和 IE 的降级处理
iOS 15.4 之前版本不支持 summary::marker，Safari 对 list-style 的处理也和 Chrome 不同。这时候不能硬上新特性，得用渐进增强。
关键动作：
- 先写通用 fallback：
summary { list-style: none; }—— 这步必须做，否则 Safari 会同时显示原生三角 + 你的::marker - 用
@supports (content: "▶")包裹summary::marker规则，避免老浏览器解析失败报错 - 对不支持
::marker的环境，改用summary::-webkit-details-marker（Chrome/Safari 旧版） +summary::-moz-list-bullet（Firefox 旧版）双写 - IE 完全不支持
details/summary，polyfill 如details-polyfill仅解决功能，无法还原::marker行为，此时建议整块替换为 JS 手风琴组件
真正麻烦的不是怎么画出新图标，而是确保 Space/Enter 键仍能触发展开——所有样式改动都不能碰 tabindex、pointer-events 或包裹额外标签，否则键盘用户就卡住了。
