details 的 height 无法直接用于动画过渡，因浏览器不支持 height: auto 的 transition；应使用 max-height + overflow: hidden，并根据内容动态设置合理值（如 200–500px 或 scrollheight），同时注意 safari 兼容性、移动端 webview 适配及 summary 点击热区问题。
height 属性不能直接用于 details 的动画过渡——这是个常见误解，也是踩坑最多的地方。
浏览器不支持 height: auto 做 transition，而 details 内部内容高度是动态的，强行写 height: 0 → height: auto 会失效，动画卡住或直接跳变。
真正能用、且兼容性相对稳的方案，是 max-height + overflow: hidden 组合。但这个值怎么设，才是关键。
为什么不能直接用 height 过渡
CSS 规范明确禁止对 height: auto 做过渡插值；details 切换时并不改变自身 height，而是靠浏览器内部机制控制子内容显隐，DOM 上没有 height 变化事件可监听。
即使你手动给内容区加 height，也会和原生 open 状态冲突，导致 toggle 事件失灵、键盘操作（Space/Enter）失效。
max-height 的安全取值范围怎么定
设太小：内容被截断，尤其含图片、多行文本或 padding 的卡片会漏掉底部；
设太大：比如 max-height: 1000px，收起时动画从 1000px 缩到 0，明显拖慢、不跟手。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 推荐初始值：200–500px，覆盖 3–6 行常规文本+内边距
- 如果内容高度差异大（比如含图片或动态加载），必须用 JS 动态读取
scrollHeight，再设max-height - 注意：
scrollHeight在 Safari 中可能不准，需先强制重排：content.offsetHeight或getComputedStyle(content).height
移动端 WebView 的展开点击穿透问题
微信、QQ、钉钉等 App 内嵌 WebView 对 details 的支持参差不齐：有的点击 summary 没反应，有的展开后内容区域无法滚动，甚至点透到底层元素。
- 真机测试必须覆盖 iOS 微信（WKWebView）、Android QQ（X5）、钉钉（UAP）三端
- 若发现点击无响应，优先检查
summary是否被pointer-events: none或父级transform干扰 - 部分 Android WebView 下，
summary需要加touch-action: manipulation才能响应轻触
Safari 对 summary::marker 的兼容性陷阱
想隐藏默认箭头并自定义图标？别只写 summary::marker { content: "" } —— Safari ≤16.6 不支持该伪元素，写了也无效。
- 稳妥写法是用
summary::before插入图标，并统一控制旋转动画 -
details[open] summary::before { transform: rotate(90deg); }要搭配transition: transform 0.2s - 避免给
summary设display: inline-block，某些 Safari 版本会丢失点击热区
details 把状态管理交给了浏览器，你只能在它允许的缝隙里做微调。稍一越界，就退回 JS 兜底的老路。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
