纯CSS响应式导航栏在IE9+至现代浏览器中稳定运行，关键在于用input[type="checkbox"]的:checked伪类触发状态切换，配合position:relative锚点、@media断点及正确z-index层级，无需JS即可实现可靠展开收起。
纯 CSS 实现的响应式导航栏，只要 input[type="checkbox"] 状态控制链没断、position: relative 该加的地方都加了、@media (max-width: 768px) 断点写对了，就能在 IE9+ 到现代浏览器里稳定展开收起，根本不需要 JS。
为什么用 input[type="checkbox"] 而不是 button 或 div
因为只有表单控件的伪类（比如 :checked）能被 CSS 选择器直接捕获并触发样式切换。button 和 div 没有原生状态，CSS 拿不到“是否被点击”这个信号——你写再多 :hover 或 :active 都没法维持展开态。而 input[type="checkbox"] 的 :checked 是稳定、可预测、无需 JS 干预的状态源。
常见错误现象：
- 用
href="#"当按钮，点一下页面滚到顶部，且语义错误 - 给
input加display: none后又想用 JS 控制，它就彻底失去交互能力 - 没配
label[for="xxx"]，导致 iOS 上点击区域小、触发率低
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 用
opacity: 0; position: absolute;隐藏input，保留可点击性 - 用
label包裹汉堡图标，并通过for属性绑定 ID - 空链接直接去掉
href，补role="button"保无障碍
position: absolute 下拉菜单总偏移？先查 position: relative
下拉菜单用 position: absolute 是为了脱离文档流、不撑高导航栏，但它必须有个“锚点”——也就是最近的已定位祖先。如果父 li 没设 position: relative，它就会一路往上找，最后可能相对 body 定位，滚动时飘走，或者被截断。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
关键细节：
- 每个含下拉项的
li必须单独加position: relative - 下拉容器用
top: 100%; left: 0;，比写死top: 44px更可靠——导航高度变（比如多行文字、图标尺寸改）也不崩 - 别在父容器上设
overflow: hidden，否则position: absolute子元素一出框就被裁掉
flex 布局里导航项被压缩或换行错乱
很多人只写 nav ul { display: flex; } 就以为完事，结果小屏上文字被压扁、图标错位、甚至横向溢出滚动条。问题出在默认 flex-shrink: 1 和没设 flex-wrap。
实操建议：
- 每项加
flex: 0 0 auto，禁止缩放，文字变长也不变形 -
nav ul必须设flex-wrap: wrap，窄屏自动折行，比强行单行更健壮 - 移动端菜单默认
display: none，用@media (max-width: 768px)切换，别用min-width反向写，容易漏掉小屏设备 - 触控区域至少
min-height: 44px，保障手指点击准确率
iOS Safari 上导航栏闪烁或固定失效
在 iOS Safari 中，position: fixed 配合 transform（比如动画、缩放）极易触发渲染闪烁；而单纯用 position: fixed 在页面滚动时也可能因视口重绘不及时导致“跳帧”。
更稳的替代方案：
- 改用
position: sticky; top: 0;，兼容性好（iOS 12.2+），滚动时吸附自然，无闪烁 - 避免在
nav或其子元素上叠加transform: translateZ(0)强制 GPU 加速，除非真有性能瓶颈且已验证有效 - 如果必须用
fixed，确保父级没设overflow: hidden或transform，否则会创建新的层叠上下文，干扰定位
最常被忽略的一点：下拉菜单的 z-index 必须高于页面其他内容，但又不能无脑设 9999——得和整体层叠上下文对齐，否则在某些嵌套结构里依然会被盖住。
