用 nav+ul+li+a 结构配合三行 CSS 即可实现兼容 IE9+ 的左侧垂直导航：重置 ul 和 nav 的 margin/padding/list-style；a 设为 display:block 并用 padding 控制尺寸；所有交互状态需同时支持鼠标与键盘操作。
直接用 nav + ul + li + a 结构，配合三行关键 CSS 就能稳定实现左侧垂直导航，不需要 flex、grid 或 JS 也能兼容 IE9+。
ul 默认样式不重置会导致布局错位
浏览器给 ul 自带 margin、padding 和 list-style（小圆点），不处理就会出现顶部空白、左侧缩进、符号乱入——这不是“美观问题”，而是布局失控的起点。
- 必须一次性写全：
ul { margin: 0; padding: 0; list-style: none; } - 不能只清
list-style-type，list-style是简写属性，漏掉可能让list-style-image残留 - 如果外层用了
nav，某些浏览器会给它默认margin，建议一并重置：nav { margin: 0; }
点击热区不完整？一定是 a 标签没设成 block
li 本身只是语义容器，真正可点击区域在 a 上。而 a 默认是内联元素，无法响应 width/height，也不撑满 li。
- 必须写：
a { display: block; padding: 12px 20px; }—— 用padding控制高度比硬设height更安全 - 避免写：
li { height: 40px; }，这样a不占满，用户点空白处会失效 - 文字垂直居中推荐：
padding: 14px 20px; line-height: 1.2;，比固定line-height: 40px更适应多行文本
悬停和当前页高亮必须作用在 a 上
很多人写 li:hover，结果鼠标移到文字左右空白就失效——因为 li 没尺寸，真正有尺寸的是 a。
- 正确写法：
a:hover { background-color: #007bff; color: white; } - 当前页高亮靠服务端或 JS 加
class="active"到对应a上，再写a.active { ... } - 别用
:focus替代:hover，键盘焦点行为和鼠标悬停逻辑不同，两者应共存而非互换
固定左侧且主内容自适应，别用 position: fixed
用 position: fixed 做左侧悬浮菜单，容易导致主内容被遮挡、滚动错位、打印异常，且移动端适配困难。更稳妥的方式是用 display: flex 隔离布局流。
- 给根容器设
display: flex，左侧nav设width: 200px; flex-shrink: 0;（防压缩） - 主内容区用
flex: 1或min-width: 0防止溢出 - 如果必须用
position: fixed，记得给body加padding-left: 200px补偿，否则内容会被盖住
最易被忽略的一点：所有交互状态（:hover、:focus、.active）必须同时支持鼠标和键盘操作，否则 WCAG 无障碍检测会失败；而 display: block + padding 这套组合，恰恰是保障热区完整性和可访问性的最小可靠解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
