details标签并非开箱即用，ie完全不支持，edge12–18及ios safari≤15.3存在兼容问题；点不动主因是html结构错误（如summary非首个子元素）或css干预（如display:none、appearance:none）；自定义箭头推荐用::before+::marker隐藏原生符号；js控制须操作open属性而非style.display；嵌套details在ios和微信中基本失效，应避免或降级为手写折叠组件。
details 标签在现代浏览器中开箱即用，但 IE 完全不支持，Edge 12–18 仅部分支持（无 toggle 事件、无动画），iOS Safari ≤15.3 存在点击热区窄、嵌套失效等问题——不是“写了就能用”，得先看场景再决定是否上。
为什么点不动？常见结构与 CSS 干预陷阱
多数“没反应”问题不是兼容性问题，而是 HTML 结构或样式破坏了原生行为：
-
summary必须是details的**首个直接子元素**；中间插空格、注释、<p></p>或<div> 都会导致 Safari/旧 Chrome 忽略点击逻辑 <li> <code>summary被设为display: none、visibility: hidden或pointer-events: none→ 点击彻底失效 - 对
summary直接写appearance: none或list-style: none（不配::marker）→ 部分浏览器箭头消失且热区错位 -
summary内嵌<h3></h3>等块级标题却未重置display→ 强制换行，原生箭头被挤到下一行甚至不可见 - 隐藏原生箭头：
summary::marker { content: "" }（Chrome/Firefox/Safari 15.4+ 有效） - 兼容 fallback：
summary::-webkit-details-marker { display: none; }+summary::-moz-list-bullet { list-style: none; } - 加自定义图标（推荐）：
summary::before { content: "▶"; margin-right: 6px; } - 展开时旋转：
details[open] > summary::before { transform: rotate(90deg); } - 别用
background-image加图标——它不随文字缩放，高 DPI 下模糊，且无法被屏幕阅读器感知 - ✅ 正确切换：
el.open = !el.open或el.toggleAttribute('open') - ✅ 监听状态：
el.addEventListener('toggle', () => console.log(el.open))——e.target.open是当前最终值 - ❌ 错误写法：
el.style.display = 'none'、el.setAttribute('open', '')（这等价于open="true"） - ⚠️ 注意：
details上绑onclick会重复触发（原生一次 + JS 一次），应只监听toggle - 非必要别嵌套；若必须用，需 JS 同步父子
open状态，并确保子details是父summary的**紧邻兄弟节点**（不能包在<p></p>里） - 检测 UA 为
Micromessenger或iOS时，降级为<div class="accordion"> <button role="button" aria-expanded="false">...</button><div>...</div> 结构 <li>polyfill（如 <code>details-polyfill）能补功能，但无法修复微信 X5 对语义标签的硬性忽略——此时只能彻底降级
如何安全自定义箭头图标
靠 ::marker 统一控制最干净，但 Safari ≤15.6 不支持；稳妥做法是用 ::before 替代原生符号：
JS 控制必须用 open 属性，不是 style.display
直接操作 style.display 会绕过浏览器内置状态，导致 toggle 事件不触发、键盘（空格/回车）失效、aria-expanded 不同步：
嵌套 details 在 iOS 和微信里基本不可用
HTML5 规范未定义嵌套行为，各浏览器实现混乱：iOS Safari ≤17.4 点二级会关一级，微信 X5 内核（尤其 Android v8.0.4x 前）直接不解析 details 标签，整个区域空白：
真正难的不是写对语法，而是判断什么时候该坚持原生，什么时候该主动降级。比如面向企业内网 IE11 用户的后台系统，details 就不该出现；而纯移动端 FAQ 页面，哪怕牺牲一点动画，也值得用 JS 保底而非强塞 polyfill。
