Chrome 与 Safari 对 vertical-align: baseline 渲染差异源于字体度量计算逻辑不同：Safari 依赖字体内嵌数据（如 sTypoAscender），Chrome 倾向 em-box 线性缩放，导致中文字体、小字号或 SVG 场景下基线偏移。
Chrome 和 Safari 对 vertical-align: baseline 的渲染差异不是 bug，而是两者对字体度量（ascent/descent）和行盒（line box）高度的计算逻辑不同——尤其在中文字体、混合字号或 SVG 图标场景下，同一段 CSS 在 Safari 里图标下沉、文字偏高，在 Chrome 里却看着“刚好”，这种错觉会误导你反复调 vertical-align 值。
为什么 vertical-align: baseline 在 Safari 里总“不准”
根本原因在于：Safari（WebKit）更依赖字体文件内嵌的度量数据（如 OS/2 表中的 sTypoAscender），而 Chrome（Blink）倾向于按 em-box 高度做线性缩放。当使用非系统字体（比如 Noto Sans SC、PingFang SC Web）、或字号小于 16px 时，Safari 可能自动启用 subpixel 缩放或调整 baseline offset，导致实际基线位置比 Chrome 高出 1–2px。这不是样式没生效，是浏览器“算得不一样”。
- 用 DevTools 检查 computed styles，对比 Safari 和 Chrome 中同一元素的
baseline对齐参考点（右键 → “Show Rulers” 可见 baseline 线） - 中文字体下差异更明显：西文字体 baseline 相对稳定，但多数中文字体未严格定义 descender，Safari 会 fallback 到保守估算
-
line-height为无单位数值（如1.5）时，Safari 对子元素行高的继承计算更“字面”，容易放大 baseline 偏移
用 display: inline-block 切断 baseline 链
不要指望靠微调 vertical-align: -0.125em 跨浏览器对齐——Bootstrap Icons 那个值只对 font-size: 1rem + font-family: system-ui 有效，换环境就失效，且 Safari 会忽略部分内联 vertical-align 的优先级。
- 给图标、按钮、输入框等替换元素统一加
display: inline-block，并显式设置vertical-align: middle或vertical-align: top - 避免混用
inline文本和inline-block图标：它们的 baseline 计算路径不同，Safari 会分别查字体度量和盒模型，结果不可控 - 如果必须 baseline 对齐，父容器加
font-size: 0清空空白间隙，子元素再重设font-size，但注意这会让em单位失效，需改用px或rem
SVG 图标要统一 viewBox 和对齐锚点
Font Awesome 的 viewBox="0 0 576 512" 和 Bootstrap Icons 的 viewBox="0 0 16 16" 导致它们的原点（0,0）在视觉上不在同一水平——Safari 渲染 SVG 时，vertical-align 是基于 viewBox 原点对齐的，不是图形内容本身。
- 所有 SVG 图标导出时强制设为
viewBox="0 0 24 24"（主流设计规范），并确保路径从 (0,0) 开始绘制 - 用
transform: translateY(-50%)+position: relative替代vertical-align，完全绕过 baseline 计算 - 对 SVG 内联样式加
all: unset，清掉图标库自带的vertical-align，再统一控制
复杂场景下放弃 baseline，改用 flex 布局
当一行里同时有小字号标签、大标题、SVG 图标、input 表单控件时，vertical-align 已经不是“对齐工具”，而是“对齐陷阱”。Safari 对 input 这类替换元素的 baseline 合成规则和 Chrome 不同，且无法通过 CSS 覆盖。
- 把整行内容包进
display: flex容器，用align-items: center实现视觉居中 - 图标用
background-image或::before伪元素插入，脱离 inline 流，彻底规避 baseline 问题 - 若需保留语义化
<svg></svg>，则包裹一层span并设display: flex; align-items: center; height: 1em;
最易被忽略的一点：Safari 会缓存字体度量计算结果，改了 font-family 或 font-size 后不刷新页面，旧 baseline 偏移可能持续存在；硬刷新（Cmd+Shift+R）比普通刷新更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
