details标签应首选用于FAQ页面，因其原生支持键盘操作、屏幕阅读器播报、无需JS即可切换状态，语义准确且SEO友好；每个问答项仅需details包裹summary（必须为首个子元素）及后续答案内容，多组并列互不影响，默认收起，加open属性可默认展开，样式定制推荐用summary::before替换不稳定::marker，IE及微信X5需polyfill或降级处理。
details 标签在 FAQ 页面里不是“能用”，而是“应该首选”——它原生支持键盘操作、屏幕阅读器自动播报状态、无需 JS 就能切换展开/收起，语义准确，SEO 友好。
为什么直接套 details + summary 就能撑起整个 FAQ 页面
每个问答项只需两层结构：details 包住整个条目，summary 放问题文字，后面紧跟答案（p、ul、div 都行）。浏览器自动处理点击、空格/Enter 触发、焦点管理、ARIA 状态同步。
-
summary必须是details的第一个子元素，否则 Safari 和旧版 Chrome 点击无响应 - 多组并列时互不影响，不用加 class 或 JS 做隔离
- 默认收起，加
open属性可让某条默认展开（但注意：Safari ≤15.4 可能忽略该属性） - 别在
summary里塞button、input或img—— 微信 X5 内核会劫持点击，iOS Safari 可能失焦
summary 的样式怎么调才不崩、不丢箭头
默认箭头由 ::marker 渲染，但 Safari 对它的支持极不稳定。统一用 summary::before 替换最稳妥。
- 先清掉原生箭头：
summary { list-style: none; } - 加自定义符号：
summary::before { content: "▶"; margin-right: 6px; transition: transform .2s; } - 展开时旋转：
details[open] > summary::before { transform: rotate(90deg); } - 移动端热区太小？直接给
summary加padding: 12px，别用min-height
如何让 FAQ 页面在 IE 或微信里不空白
IE 完全不识别 details，微信 Android X5 内核（尤其 v8.0.4x 以下）会直接跳过标签渲染，结果就是整块内容消失。
- 检测 UA 是 Micromessenger 或 iOS Safari ≤17.4 时，降级为
div+button[role="button"]结构 - 必须手动维护
aria-expanded和aria-controls，否则 NVDA/JAWS 读不出状态 - polyfill 推荐用
details-polyfill（npm 包），它会自动补max-height动画和事件代理，比手写 JS 更稳 - 服务端渲染时若 SSR 输出了
open属性，客户端首次加载仍可能闪动（先收再展），建议加details[open] { display: block; }强制初始可见
真正容易被忽略的点不在写法，而在 CMS 富文本输出——summary 被自动包裹进 p 标签就彻底破坏语义，此时原生行为全部失效，只能后处理 DOM 或放弃原生方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
