导航栏高度不一致的根本原因是line-height、padding、font-size、box-sizing和vertical-align: baseline共同作用，尤其图文混排时基线对齐拉高容器；强制统一高度最稳定方案是父容器设height+display: flex+align-items: center。
导航栏高度不一致的根本原因
不是“没设 height”那么简单，而是 line-height、padding、font-size、box-sizing 和行内元素默认 vertical-align: baseline 共同作用的结果。尤其当导航项混用文字、图标、img 或 svg 时，基线对齐会直接拉高容器高度。
强制统一高度的可靠写法
用 height + display: flex + align-items: center 是目前最稳定的方式，绕过基线对齐陷阱，且兼容所有现代浏览器（包括 Safari 10+）：
.nav-bar {
height: 48px;
display: flex;
align-items: center;
padding: 0 16px;
}
.nav-bar a {
display: flex;
align-items: center;
height: 100%;
padding: 0 12px;
text-decoration: none;
}
-
height必须设在父容器上，子项用height: 100%继承 - 避免对
a单独设line-height，它和height冲突时优先级混乱 - 如果内部有
svg，加vertical-align: middle或直接设height/width防止撑开
旧项目里 font-size / line-height 混乱怎么办
先用浏览器 DevTools 检查每个导航项的 computed line-height 值——常出现 normal（实际是字体大小的 1.1–1.2 倍）或继承自全局样式。解决方案是归零再重置：
.nav-bar a {
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;
}
.nav-bar a span {
display: inline-block;
line-height: 1.5; / 文字部分单独控制行高 /
}
-
line-height: 1让文字“贴底”，配合flex align-items: center才真正居中 - 不要依赖
vertical-align: middle修复图文混排，它只在 inline 场景有效，且受父容器line-height牵制 - 若用 rem/em，请确保根字号
:root { font-size: 16px }显式声明，避免 UA 默认值差异（如 Chrome Android 是 16px，iOS Safari 可能缩放）
响应式下高度塌陷或溢出
媒体查询中仅改 font-size 不够，必须同步调整 height 和 padding。更稳妥的是用 clamp() 锁定弹性高度：
立即学习“前端免费学习笔记（深入）”；
.nav-bar {
height: clamp(40px, 4vh, 48px);
font-size: clamp(12px, 0.8vw, 14px);
}-
clamp(min, preferred, max)比纯 media query 更平滑，尤其在平板横竖屏切换时 - 慎用
vh单位：iOS Safari 的地址栏收放会触发 viewport 高度跳变，导致导航栏闪动 - 如果用了
position: sticky，确保父容器有明确top值（如top: 0），否则 sticky 行为可能影响高度计算
统一高度这件事，本质是放弃“靠文字自然撑开”的惯性思维，主动接管尺寸控制权。最常被忽略的是 box-sizing: border-box 没全局设，导致 padding 加到 height 外面，一加边框就破功。
