details标签样式重写需绕过浏览器原生控制、处理跨浏览器差异并补全交互语义；safari 15.4前不支持summary::marker，须用summary::after插入图标并保持display:list-item；max-height动画需固定像素值，动态高度须js测量；手风琴效果必须js监听toggle事件实现单开单关。
details 标签的样式重写不是“覆盖默认样式”那么简单，而是要绕过浏览器对 summary 的原生控制逻辑、处理跨浏览器渲染差异、并主动补全缺失的交互语义。直接写 summary { appearance: none } 或 details::marker 在 Safari 15.4 之前根本无效。
为什么 summary::marker 在 Safari 中不生效
Safari（iOS 15.4 之前、macOS Monterey 早期）完全不支持 ::marker 伪元素，且其 summary 内部箭头是硬编码绘制的，无法通过 CSS 选中。强行加 list-style: none 只会让箭头消失，但点击热区变窄甚至失效。
- 必须降级：用
summary::after+content插入自定义图标，并确保summary保持display: list-item（或显式设为inline-flex）以维持热区 - 加
cursor: pointer和user-select: none防止误选文字干扰点击反馈 - iOS Safari 对
summary的点击区域高度敏感，建议最小行高设为1.4，避免顶部/底部留白导致点不中
details:open 动画卡顿的三个硬限制
:open 是状态选择器，本身不触发重排，但你想给内容区加展开动画时，height: auto 无法过渡，max-height 又难预估——这是最常被忽略的性能瓶颈。
-
max-height终值不能写none或fit-content，必须是固定像素值（如max-height: 400px），否则 transition 直接跳变 - 若内容高度动态（比如含图片或 JS 渲染文本），需用 JS 测量后注入 style：
el.style.maxHeight = el.scrollHeight + 'px'，再加transition - Chrome 115+ 支持
@keyframes配合:open .content，但 Safari 仍只认transition，且对transform: scaleY()的渲染有延迟，优先用opacity+max-height
在 summary 里嵌套 h5 后箭头错位怎么办
标题标签默认 display: block，会把原生箭头挤到下一行或吞掉——这不是 bug，是规范允许但需手动修正的布局冲突。
- 必须重置
h5：设display: inline-block（不用inline，避免丢失 vertical-align 控制）、margin: 0、line-height: 1.2 - 禁用
summary上的list-style全局清除，仅用summary::after添加图标，否则h5和箭头会争夺空间 - 如果用了
flex布局，summary不要设position: relative，否则 Safari 会裁剪掉部分热区
如何让多个 details 实现手风琴效果（单开一闭）
原生 details 没有互斥逻辑，纯 CSS 无法实现手风琴；必须用 JS 监听 toggle 事件并手动关闭其他项。
- 监听
details的toggle事件（注意：不是click），检查event.target.open === true - 用
document.querySelectorAll('details:not([open])')批量关闭其他项，避免遍历全部再过滤 - 若需动画同步，先
close()其他项，等transitionend触发后再开当前项，否则视觉上会闪一下
真正难的不是写样式，而是判断哪些行为必须由 JS 补足、哪些能靠 CSS 状态选择器兜底——尤其是当内容高度不可预知、又要求 Safari 兼容时，max-height 的终值测量和 fallback 方案，往往比动画本身更花时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
