字体图标baseline渲染差异源于浏览器对line-height和字体度量实现不同，chrome、safari、firefox对ascender/descender计算不一致，尤其中文字体下更明显；bootstrap icons等svg图标默认vertical-align:-0.125em是针对特定字号微调的，换字体或字号即失效，且safari可能忽略该内联样式；混用不同来源svg时viewbox原点不统一（如font awesome为"0 0 576 512"，bootstrap icons为"0 0 16 16"），导致vertical-align对齐锚点不同；解决需统一viewbox、强制display:inline-block切断baseline链，并避免依赖图标库默认对齐。
字体图标 baseline 渲染差异源于浏览器对 line-height 和字体度量的实现不同
不是你写错了 vertical-align，而是 Chrome、Safari、Firefox 对同一段文字的 ascender/descender 高度计算不一致，尤其在中文字体下更明显。比如 line-height: 1.5 在 Chrome 里撑出的行盒高度可能比 Safari 高 2px，而字体图标（如 <i class="bi bi-x"></i>）默认按 baseline 对齐，就会跟着“漂”。
Bootstrap Icons 等 SVG 图标自带内联 vertical-align 样式
Bootstrap 5+ 的图标元素默认带 vertical-align: -0.125em，这个值是针对特定字号和字体微调过的。一旦你改了父容器的 font-size 或换用 Web Font，它就失效——而且 Safari 会忽略部分内联样式优先级，导致 Chrome 看着齐、Safari 明显下沉。
- 检查 DevTools 中图标元素的 computed styles，看
vertical-align是否被覆盖或降权 - 用
all: unset或vertical-align: initial清掉默认值再重设 - 别依赖图标库自带的对齐逻辑，把它当“不可信输入”处理
IE11 和现代浏览器对 line-height: normal 的解析完全相反
在 IE11 中，line-height: normal 会强制按字体内部度量撑高行盒；而在 Chrome/Firefox 中，它常退化为接近 line-height: 1。如果父容器没设明确 min-height，又用了 line-height: normal，图标在 IE11 里会“浮起来”，其他浏览器里却“沉下去”。
- 永远不要让
line-height: normal和align-items: center共存于需兼容 IE11 的场景 - 改用
line-height: 1.2这类有单位的值，或直接设min-height: 40px+line-height: 40px - 若必须支持 IE11，放弃
vertical-align，改用display: inline-flex容器
混用不同来源图标时 viewBox 基准线不统一
Font Awesome 的 SVG 默认 viewBox="0 0 576 512"，Bootstrap Icons 是 viewBox="0 0 16 16"，而你自绘的 SVG 可能是 viewBox="-4 -4 24 24"。这些 viewBox 原点位置不同，导致图标内容在渲染盒内的垂直锚点天然偏移，vertical-align: middle 对它们“对齐的其实是不同东西”。
- 统一所有 SVG 的
viewBox为"0 0 16 16"或"0 0 24 24"，避免原点漂移 - 给每个图标加
display: inline-block，切断 baseline 对齐链 - 同一行只用一种图标来源，别把
bi-star和fa-star并排写
vertical-align 就像拧一个松动的螺丝，越拧越歪。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
