移动端目录失效主因是 details 兼容性差：ios safari 15.4 及更早存在嵌套 open 状态同步 bug，android webview 中 summary 焦点不稳定；正确嵌套需将子 details 写入父 summary 闭合前，禁用 open 属性，hover 必须配 js，缩进统一用 margin-left: 0; padding-left: 1.5em;，多级目录推荐 clamp 控制字号，锚点必须包裹文本，下拉菜单用 fit-content + max-width 组合，打印稳定方案为原生 ul 嵌套 + 伪元素连线，缩进单位必须用 em/rem。
为什么用 / 做目录容易在移动端失效
做目录容易在移动端失效
不是所有设备都支持 details 的点击展开逻辑——尤其 iOS Safari 旧版本（15.4 及更早）对嵌套 details 的 open 状态同步有 bug，点开二级后一级自动收起；Android WebView 中键盘焦点无法稳定落在 summary 上，导致屏幕阅读器跳过子项。
常见错误是直接写：<details><summary>A</summary></details><details><summary>B</summary></details>，这根本不是嵌套，而是并列，JS 无法通过 parentNode 找到层级关系。
- 必须把二级
details写进一级summary的闭合标签前，即：<details><summary>A</summary><details><summary>A-1</summary></details></details> - 别加
open属性强制展开，移动端用户手指精度低，误触率高，全开反而增加滚动负担 - hover 展开必须配 JS，
details原生不响应:hover，纯 CSS 方案在触摸设备上完全失效
用 嵌套实现语义化目录时的缩进控制陷阱
ol 天然有序，适合章节编号，但浏览器默认缩进靠 margin-left，而各 UA 样式差异大：Chrome 默认 40px，Firefox 是 2em，Safari 在缩放字体时还会重算。直接写 padding-left: 2em 会导致编号被截断或错位。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 重置缩进统一用：
ol { margin-left: 0; padding-left: 1.5em; }，再配合list-style-position: outside（默认值，别改） - 超过三层嵌套（如 2.1.1.1）时，视觉密度陡增，建议用
font-size: clamp(0.875rem, 1.2vw, 1rem)控制子级字号，避免小屏挤成一团 - 锚点链接必须包裹文本内容，不能只包
a标签外层：<li>@#@#@#@#@#@#@#@#@#@0</li>正确；<li>@#@#@#@#@#@#@#@#@#@1第二章</li>错误——后者键盘 Tab 无法聚焦到链接，屏幕阅读器读不到可跳转语义
响应式下拉菜单中子菜单宽度自适应的 CSS 实现难点
子菜单宽度不能写死（如 width: 200px），否则小屏会溢出；也不能只靠 min-width: max-content，因为英文长词或中文无空格文本会撑爆视口。
- 推荐组合：
min-width: fit-content; max-width: 90vw; width: max-content;，其中fit-content让菜单贴合内容，max-width防止超宽 - 横向菜单在移动端需折叠为汉堡按钮，但子菜单仍要能展开——此时不能依赖
:hover，必须用 JS 绑定click并切换aria-expanded和data-open属性 - 子菜单定位用
position: absolute，但父级li必须设position: relative，否则在transform: scale()或overflow: hidden容器里会错位
多级目录结构在打印 PDF 或导出为静态文档时的稳定性问题
Chrome 打印预览中，transform: scaleY(-1) 类翻转技巧会让连线错位；grid-template-areas 在 PDF 导出时多数工具不识别，区域定义失效；details 的 open 状态在打印时不保留，全部收起。
- 真正稳定的方案是原生
ul嵌套 +margin-left缩进 +::before/::after画线，所有属性都基于标准盒模型，打印、PDF、屏幕阅读器全兼容 - 图标必须用伪元素生成，禁用
<img>或 Unicode 字符——前者加载失败留白，后者在等宽字体下偏移，且无法随字号缩放 - 连线绘制时，垂直线用
left: -16px固定定位，横线只加在最后一个子li上，用:last-child::after，避免每项都画造成重叠
最易被忽略的是：缩进单位必须用 em 或 rem，而非 px。用户调整系统字体大小时，px 缩进会僵住，导致子项文字撞到父级编号上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
