和是原生展开/收起标签，但存在兼容性问题（如safari 15.4前不支持js控制open）、dom结构要求严格（须为首个子元素）、webview渲染异常及样式限制（如overflow: hidden裁剪内容）。
<details></details> 和 <summary></summary> 是原生支持展开/收起的语义化标签，无需 JS 就能实现点击展开全文效果，但默认样式简陋、兼容性有坑、交互细节容易被忽略。
为什么直接用 <details></details> 有时不生效
常见原因是浏览器兼容性或 DOM 结构问题：
-
<summary></summary>必须是<details></details>的第一个子元素，否则折叠逻辑失效（Chrome/Firefox 均如此） - Safari 15.4 之前不支持
open属性的动态 JS 控制（el.open = true无效） - 部分安卓 WebView（如微信内置浏览器）对
<details></details>渲染异常，可能始终展开或无法响应点击 - 若父容器设置了
overflow: hidden且高度受限，展开内容会被裁剪
<summary></summary> 里能放什么？哪些写法会破坏交互
<summary></summary> 支持内联元素和部分块级元素，但以下写法会导致点击区域失效或样式错乱：
- 嵌套
<button></button>、<a></a>或其他可交互元素——会劫持 click 事件，<details></details>不再响应 - 使用
display: block+margin或padding过大，可能让视觉点击区与实际触发区错位 - 添加
pointer-events: none（哪怕只作用于图标），整个<summary></summary>变成“不可点” - 推荐写法：
<summary>展开说明<span aria-hidden="true"> ▼</span></summary>，图标用aria-hidden避免读屏干扰
如何用 CSS 微调展开箭头和过渡动画
原生箭头无法直接用 CSS 修改，需隐藏并自定义：
- 先清除默认：
details summary::marker { content: "" }（Firefox/Chrome 支持，Safari 需额外处理） - 用
details[open] summary::after控制展开态图标，例如content: "▲" - 高度过渡需配合
details[open] > *:not(summary)设置max-height+transition，但注意：<details></details>本身不支持height过渡，必须作用于内部内容容器 - 避免对
<summary></summary>使用transform: scale()，某些 Safari 版本会丢失点击热区
真正麻烦的是跨端一致性——PC 端表现稳定，但微信、QQ、钉钉等 App 内嵌 WebView 对 <details></details> 的支持程度不一，上线前务必真机测试；如果需要 100% 可控，还是得 fallback 到 JS 实现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
