details 默认为块级元素，会破坏行内布局；需设 display: inline-block 或父容器用 flex；summary 有默认 margin-bottom 需重置；嵌套时须确保 summary 为首个子元素；不可直接用于 table。
details 默认是块级元素，会破坏行内布局流
直接写多个 <details> 并列在导航栏或工具栏里，它们会竖着堆成一列，而不是你想的横向排列。这不是 bug，是浏览器默认 display: block 的结果——它强制换行、撑满父容器宽度，哪怕里面只有一行文字。
常见错误现象：在 <nav> 里写 <details><summary>首页</summary></details><details><summary>关于</summary></details>，结果菜单变成上下结构。
- 最简对策：给
<details>加display: inline-block或display: inline-flex - 响应式需求更强时，建议父容器用
display: flex，再统一控制子项对齐和换行（flex-wrap: wrap） - 改完 display 后，
<summary>的点击热区可能变窄，务必加padding或min-width保触控可用性
summary 自带 margin-bottom，导致菜单项错位
<summary> 在 Chrome/Firefox 中默认有 margin-bottom: 1em，横向菜单里这个下边距会把后一个菜单项往下顶，视觉上“不齐”。这不是样式写错了，是 UA 样式表的默认行为。
尤其当父容器是 display: flex 时，这个 margin 可能触发主轴外偏移，仅清 margin-bottom 不够。
立即学习“前端免费学习笔记（深入）”；
- 安全起点：
summary { margin: 0; } - 如果用了 flex 布局，且发现子项仍错位，检查是否需要清空全部 margin：
summary { margin: 0; }而不是只设margin-bottom: 0 - 别依赖
line-height去“撑高”<summary>—— 它不影响折叠逻辑，但会影响点击区域高度
details 嵌套时 DOM 结构被破坏，导致布局塌陷
想用 <details> 实现二级菜单，直接套一层 <details> 在另一个里面，容易出问题：子项缩进错乱、箭头方向不一致、点一级时两级一起收起。根本原因是浏览器对嵌套 <details> 没有统一规范，Chrome 和 Safari 处理方式不同。
更隐蔽的问题是：如果嵌套层级里夹了空格、换行或注释，Safari 会直接忽略点击逻辑——因为 <summary> 必须是 <details> 的**第一个子节点（element node）**，文本节点（包括换行）会让它失效。
- 确保
<summary>是<details>的直接子元素，中间不能有任何空格、换行或注释 - 子级箭头必须手动重置：
details details summary::marker { content: "▸"; } - 缩进靠
padding-left控制，别用text-indent—— 对<summary>无效，还影响可访问性 - 展开状态选择器要加层级限定：
details > details[open]，否则样式会污染所有子级
details 不能塞进 table 里，否则 DOM 被浏览器自动修复
把 <details> 直接写在 <tr> 或 <td> 里，浏览器会立刻把它“踢”出 <table> 结构——因为 HTML 规范只允许 caption、colgroup、thead、tbody、tfoot、tr 作为 <table> 的子元素。<details> 不在白名单里。
后果很实际：DOM 结构错乱、toggle 事件丢失、点击区域脱离预期、整行渲染错位。你写的结构，浏览器根本不认。
- 正确做法：放弃原生
<table>，用 CSS Grid 或 Flex 模拟表格对齐，<details>放在合法容器（如<div>）里 - 关键 CSS：
.grid-row { display: contents; }让 div 行为像<tr>，不破坏 grid 流 - 若强依赖表格语义（比如屏幕阅读器需读作表格），只能降级：用 JS +
max-height过渡模拟折叠，<details>彻底弃用
