根本原因是HTML结构未对齐：checkbox必须位于nav前且用+或~选择器控制；需确保input可交互、label for匹配、避免display:none、兼顾可访问性及Safari渲染延迟。

用 :checked 配合隐藏导航时，为什么点击没反应？

根本原因通常是 HTML 结构没对齐： 必须在

或其容器之前，且用相邻兄弟选择器（+）或通用兄弟选择器（~）控制显示。否则 CSS 无法“感知”状态变化。

实操建议：

• 放在
  外层容器最顶部，且不可被 display: none 或 visibility: hidden 隐藏（可用 position: absolute; opacity: 0; pointer-events: none; 隐藏但保留可交互性）
• 触发按钮必须用 ，且 for 值与 input 的 id 完全一致（大小写敏感）
• 不要试图用 JS 模拟 :checked 状态——CSS 伪类只响应真实表单控件的原生状态

小屏下导航收起后，如何让焦点和键盘操作不“掉链子”？

纯 CSS 开关容易忽略可访问性：display: none 会让屏幕阅读器跳过整个导航，visibility: hidden 虽保留语义但依旧不可聚焦。用户按 Tab 键可能直接跳过菜单，或卡在隐藏区域。

实操建议：

• 用 clip-path: inset(100%) 或 position: absolute; left: -9999px; 隐藏内容，而非 display: none
• 配合 aria-expanded 属性动态更新： → JS 监听 change 事件后设为 "true"，确保辅助技术能感知开闭状态
• 打开时用 focus() 主动聚焦到第一个 或 ，关闭时恢复聚焦到触发按钮

为什么 Safari 上 :checked ~ nav 有时失效？

Safari（尤其旧版 iOS）对兄弟选择器在动态插入节点或 DOM 变动后存在渲染延迟，加上某些 CSS 层叠顺序问题，会导致状态切换后样式未及时应用。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

实操建议：

• 避免嵌套过深：确保 和
  是同一父容器下的直系兄弟，不要隔多层
• 加一层无副作用的重绘触发：在 JS 中 toggle 后短暂设置 nav.style.transform = 'translateZ(0)' 再还原（仅 Safari 需要）
• 不用 transition 动画控制 display —— 它不支持过渡；改用 max-height、opacity 或 transform

移动端触摸穿透（click-through）怎么破？

当导航展开后快速点击遮罩层外区域关闭，再立刻点原位置按钮，可能触发底层按钮 —— 这是 iOS Safari 的 300ms 延迟残留 + pointer-events 切换时机问题。

实操建议：

• 遮罩层（
  ）必须显式设 pointer-events: auto，关闭时用 pointer-events: none（别依赖默认值）
• 关闭逻辑里加 event.preventDefault() 和 event.stopPropagation()，尤其监听在 或遮罩层上
• 避免用 click 绑定开关，改用 change 事件监听 ，更可靠

真正麻烦的不是怎么写出开关动画，而是让每次点击都精准落在预期目标上，同时不打断键盘流、不欺骗屏幕阅读器、不被 Safari 的渲染节奏甩开半拍。