Safari ≤15.6 中 summary::marker 无效是因原生不支持，应改用 list-style: none + summary::before 降级方案，确保图标兼容且交互正常。
summary::marker 在 Safari 中不生效怎么办
直接写 summary::marker { content: "" } 在 Safari ≤15.6 和部分旧 Edge 中完全无效，浏览器会忽略该规则。这不是你写错了，而是原生支持缺失。
真正跨浏览器稳定的方案是两步走：先用 list-style: none 清除默认标记（它在所有现代浏览器中都起作用），再用 summary::before 注入自定义图标。
-
summary { list-style: none; }—— 必须加在 summary 上，不是 details 或伪元素 -
summary::before { content: "▶"; margin-right: 6px; }—— Unicode 箭头兼容性远高于 SVG 或 background-image - 别用
appearance: none，Safari 需要-webkit-appearance: none，但依然无法解决箭头残留问题
details[open] 下箭头旋转失效的常见原因
写 details[open] > summary::before { transform: rotate(90deg); } 却没反应？大概率是 CSS 优先级或 display 类型冲突。
关键限制：如果给 summary 设置了 display: inline-block 或 float，transform 在某些 Safari 版本中会被静默丢弃；同时，transition 必须显式声明在 summary::before 上，不能只写在父元素上。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须加
transition: transform .2s ease;到summary::before规则里 - 避免对
summary设display: block——它会让::before的基线错位，箭头上下偏移 - 用
vertical-align: middle微调图标对齐，比margin-top更可靠
为什么 summary 里放 后箭头没了
不是 CSS 没生效，是 <h5></h5> 默认 display: block 把原生箭头“挤”出了行流。浏览器仍渲染了箭头，但它被压到了 <h5></h5> 下方、不可见区域。
解决方案不是删掉标题标签，而是重置它的显示行为，让其与伪元素共处一行：
summary h5 { display: inline-block; margin: 0; vertical-align: middle; }- 不要用
inline——它无法控制宽高和 padding，导致点击热区变窄 - 如果用了字体图标（如 Font Awesome），确保其
font-size和line-height与summary匹配，否则旋转后位置飘移
折叠内容展开后顶部有空白怎么修
那是 <summary></summary> 自带的 margin-bottom（Chrome/Firefox 默认约 0.75em），不是你写的 CSS。展开时这个 margin 会和内容块的 margin-top 叠加，造成跳动。
最稳妥的清空方式是统一重置，而不是只针对某一个状态：
-
summary { margin: 0; }—— 干净彻底，后续靠 padding 控制间距 -
details > *:not(summary) { margin-top: 0; }—— 防止子元素自带 top margin 推开内容 - 千万别用
details[open] > *:first-child去选内容，因为<summary></summary>之后可能有注释或空格文本节点，导致选择器失效
