details标签不支持图文混合折叠，必须用<div>或<figure>包裹图文后嵌入；<summary>仅限行内内容，图片需设display:inline-block，高清图应lazy加载以防首屏卡顿。
details 标签本身不支持图文混合折叠，必须配合 <summary> 和块级容器
直接把图片和大段说明文字塞进 <details> 会触发渲染异常：浏览器可能忽略换行、图片错位，或在 <summary> 后强制换行导致折叠区内容“悬空”。核心解法是用 <div> 或 <figure> 包裹图文，再整体放进 <details> 的闭合标签内。
常见错误现象：Uncaught DOMException: Failed to execute 'appendChild' on 'Node'（当 JS 动态插入未闭合的图文结构时）；或点击后仅显示文字、图片始终可见（因图片被误放在 <summary> 外且未包裹）。
-
<summary>只能包含**行内内容**，图片需加display: inline-block才能安全混排，否则会脱离文档流 - 若图文含标题、图注、多段说明，优先用
<figure><figcaption>组织，再嵌入<details>—— 语义清晰且利于屏幕阅读器识别 - 不要给
<details>设height: 0; overflow: hidden等 CSS 强制折叠，这会破坏原生展开/收起逻辑，且影响无障碍访问
让图片带缩略图+点击展开详情，需用 <summary> 内嵌小图 + <details> 外层控制
典型场景：技术文档中一张架构图，<summary> 显示 80×60 缩略图和“点击查看全图及说明”，点开后显示高清图+三段文字释义。关键在尺寸控制与加载时机。
性能影响：高清图若在 <details> 关闭时仍被浏览器加载（尤其 <img src> 直接写死），会拖慢首屏。应配合 loading="lazy" 或 JS 动态注入 src。
立即学习“前端免费学习笔记（深入）”；
- 缩略图用
<img src="thumb.png" width="80" height="60" alt="架构图缩略图">，确保width/height属性存在，防止布局偏移 - 详情区高清图建议用
<img loading="lazy" src="diagram-full.png" alt="系统架构全图">，避免关闭状态也预加载 - 若需响应式图片，
<picture>必须整个放在<details>内部，不可只包<source>
Chrome/Firefox/Safari 对 <details> 的兼容性差异会影响图文对齐
Firefox 默认给 <summary> 加 list-style: none，而 Chrome/Safari 需手动清除，否则小图右侧可能多出默认三角符号的空白；Safari 15.4 前对 <details open> 内嵌 <img> 的垂直对齐有 bug，文字基线偏高。
容易踩的坑：用 vertical-align: middle 试图对齐图文，但在不同浏览器下表现不一；或给 <summary> 设 flex 布局却忘了重置其默认 display: list-item。
- 统一清除默认样式：
summary { list-style: none; display: grid; align-items: center; gap: 8px; } - 图文并排时，用
grid或flex替代float—— 后者在<summary>中已被多数浏览器弃用 - 如需 IE 兼容（虽已淘汰），必须用 JS 模拟
<details>行为，不能依赖 CSS::marker伪元素
复杂释义含代码块、表格时，<details> 内部需限制 max-height 防止页面撑爆
当折叠内容包含长代码块（<pre><code>）或宽表格，展开后可能横向溢出、滚动条遮挡文字，或触发移动端 viewport 缩放异常。
为什么这样做：原生 <details> 不提供高度过渡动画，直接设 max-height + overflow-y: auto 是最轻量的可控方案，比 JS 计算高度更稳定。
- 给
<details>子容器加max-height: 50vh; overflow-y: auto;，避免页面整体滚动被截断 -
<pre>内代码行过长时，必须加white-space: pre-wrap; word-break: break-word;，否则横向滚动条失效 - 表格需设
table-layout: fixed;并给<th>/<td>设max-width，否则在窄屏下无法收缩
<summary> 的语义边界 —— 它不是装饰性标题，而是可聚焦、可键盘操作的交互节点。任何图文混排都必须保证它能被屏幕阅读器准确朗读，且焦点停留位置符合直觉。 
