最可靠方案是用 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。

图标方向必须和展开状态严格同步

用户靠图标旋转判断当前状态，一旦错位（比如点了但图标没转、或内容没显但图标已转），交互信任感立刻崩塌。关键点在于：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 不要依赖 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 强制触发重排才能确保图标即时响应。