最可靠方案是用 summary::before 替代 ::marker 实现跨浏览器图标：清除 list-style 后插入 Unicode 符号，通过 details[open] summary::before 控制旋转，避免 JS 手动切 class 或 height 过渡，确保图标与状态严格同步。
summary::before 自定义图标最可靠
原生 summary 的箭头由浏览器控制，::marker 在 Safari 中行为不一致，强行设 content: "" 可能失效。真正跨浏览器稳定的方案是放弃 ::marker，改用 summary::before 插入图标：
-
summary { list-style: none; }先清除默认列表样式（含箭头） summary::before { content: "▶"; display: inline-block; margin-right: 6px; transition: transform 0.2s; }-
details[open] summary::before { transform: rotate(90deg); }展开时右旋，视觉明确表示“已打开”
Unicode 符号足够轻量，如需更精细控制，可用 SVG Base64 或 background-image 替代 content。
图标方向必须和展开状态严格同步
用户靠图标旋转判断当前状态，一旦错位（比如点了但图标没转、或内容没显但图标已转），交互信任感立刻崩塌。关键点在于：
- 不要依赖 JS 手动 toggle class 控制图标——容易和
details[open]状态脱节 - 始终用 CSS 选择器
details[open] summary::before驱动视觉变化，让样式跟随 DOM 状态自动响应 - 如果用了 JS 强制设置
open属性（比如初始化时），要确保 DOM 更新完成后再触发重排，否则 Safari 可能延迟渲染旋转
不要给 details 设 height 过渡
details 内容高度是动态的，直接写 transition: height 0.3s 会导致动画卡顿、高度计算错误甚至布局塌陷。需要平滑展开动画时：
- 放弃原生
details，改用max-height+overflow: hidden的 JS 方案 - 初始
max-height: 0，展开时设为max-height: 500px（或用 JS 读取scrollHeight动态赋值） - 注意：此时图标仍可用
details[open] summary::before控制，但状态同步需靠 JS 切换open属性并等待offsetHeight触发重排
多个折叠项共存时图标状态互不影响
details 默认各自独立，每个都维护自己的 open 状态，CSS 选择器 details[open] summary::before 天然隔离。但要注意：
- 别用全局 class（如
.is-open）去控制图标——会污染其他details - 如果要做手风琴效果（单开），JS 关闭其他项后，对应
details[open]立即失效，图标自动回转，无需额外操作 - 避免在 JS 中用
element.classList.toggle()模拟 open 状态——这会让 CSS 选择器失效，图标停在错误方向
细节上最容易被忽略的是 Safari 对 open 属性的 JS 设置时机：它不保证 DOM 更新后立即反映到伪元素，所以依赖 details[open] 的图标切换，在 JS 初始化批量设 open 后，可能需要 getComputedStyle 强制触发重排才能确保图标即时响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
