全屏后<details>失效因浏览器重置默认样式，需手动重置margin、display、伪元素及触控区域，并监听fullscreenchange动态修复状态。
details 标签在全屏下不会自动适配，必须手动重置样式和交互逻辑，否则会错位、不可点、或箭头消失。
为什么全屏后 <details> 布局/点击失效？
全屏状态下浏览器会重置部分默认样式：移除 margin、强制 flex 容器行为、缩放渲染上下文。而 <details> 依赖 UA 默认的 margin-bottom 和 display: block 行为，一旦被覆盖，就会出现：
-
<summary>点击热区变小甚至失效（尤其移动端） - 嵌套
<details>的箭头方向错乱或不显示 - 横向菜单中多个
<details>堆成一列，不再 inline 排列 - 全屏后
summary::marker被忽略，图标消失
summary::marker 在全屏下不显示怎么办？
全屏时伪元素渲染逻辑可能被重置，::marker 不再生效是常见现象。不能只靠它控制图标，得用更稳的 fallback 方式：
- 显式声明
summary::marker { content: "▶ "; }，并在details[open] summary::marker中改内容 - 若仍不显示（如 Safari 全屏下），改用
summary::before+content模拟箭头 - 避免用
background-image替代箭头——会丢失语义，影响 screen reader - 确保
summary有足够padding和min-height，否则伪元素无空间渲染
全屏时如何让 <details> 菜单保持可操作？
全屏后触控区域、焦点顺序、z-index 层叠都可能变化，需针对性加固：
立即学习“前端免费学习笔记（深入）”；
- 给
summary加min-height: 44px; padding: 0 16px;，确保符合移动触控最小尺寸 - 禁用
pointer-events: none—— 即便全屏也别加，否则点击直接丢弃 - 用
details:fullscreen summary或details:-webkit-full-screen summary单独重置全屏状态下的样式 - 嵌套菜单必须加层级限定：
details > details summary::marker，防止样式污染 - 退出全屏后记得恢复原始
margin和display，否则 DOM 回退后布局错乱
监听全屏切换并动态控制 open 状态是否可靠？
不可靠。全屏切换本身不触发 <details> 的 toggle 事件，也不会自动同步 open 属性。你不能假设“进了全屏，菜单就该展开”：
- 用户按 ESC 退出全屏，
<details>的open状态不变，但视觉可能被遮挡或压缩 - 全屏后若需强制收起所有菜单，得手动遍历并设
el.open = false - 监听
document.fullscreenElement变化后，再用requestAnimationFrame延迟更新 UI，避免样式未就绪就操作 DOM - 别在
fullscreenchange里直接调details.toggle()—— 可能因渲染未完成导致无效
真正麻烦的不是进全屏那一刻，而是退出后样式残留、焦点丢失、以及嵌套菜单的状态不同步——这些细节不测试真机+多浏览器，上线后第一周就会被用户截图发群里问“为啥点不开”。
