vertical-align在移动端数字和单位间常失效，因字体度量差异、baseline不一致及line-height动态计算；推荐用display: flex+align-items: center替代，并统一字体栈、合理设置字重与间距。
为什么 vertical-align 在移动端数字和单位间经常失效？
因为默认行内元素（比如 <span></span> 包裹的数字和单位）受字体度量影响极大：不同字体、不同字号、甚至同一字体在 iOS 和 Android 上的 baseline 行为不一致；vertical-align: middle 是相对父元素 line-height 的中点对齐，不是相对内容本身的视觉中心。尤其当数字用粗体、单位用常规字重时，基线偏移更明显。
- 数字常使用
font-weight: 700，单位用font-weight: 400，导致字形下沉量不同 - iOS 系统字体（San Francisco）对数字的 descender 控制比 Roboto 更保守，但单位字母（如“元”“¥”）渲染位置仍浮动
-
line-height设为无单位值（如1.2）时，实际高度随字体大小动态计算，放大缩放后对齐漂移
用 display: flex 替代纯行内布局最稳
把价格数字和单位包裹进一个 display: flex 容器，用 align-items: center 做垂直居中，彻底绕开 baseline 计算逻辑。这是目前兼容性好、行为可预测的首选方案。
- 父容器需设
font-size，子元素用em或rem继承，避免绝对单位干扰 - 数字部分加
margin-right: 0.15em（非固定 px），留出自然字间距，防止“¥199元”粘连 - 单位文字（如“元”）建议单独用
<span class="unit"></span>，便于后续加font-feature-settings: "tnum"控制数字比例 - 避免给 flex 容器设
height，否则在 viewport 缩放时可能触发强制换行或截断
.price {
display: flex;
align-items: center;
font-size: 16px;
}
.price-num {
font-weight: 700;
margin-right: 0.15em;
}
.price-unit {
font-weight: 400;
font-size: 0.875em; /* 比数字小约 12.5% */
}
遇到“¥”符号错位，优先检查字体回退链
“¥”在某些安卓机型上会 fallback 到 Noto Sans CJK，其“¥”字形比中文“元”更高；而 iOS 上 San Francisco 的“¥”本身偏矮。如果只写 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI"，安卓会跳过前两项直接用系统默认，导致单位高度不一致。
- 强制统一中文字体：在
font-family开头加入"PingFang SC", "Hiragino Sans GB"（iOS/Android 都有） - 对“¥”做特殊处理：用伪元素 + Unicode 替换，或改用 SVG 图标（但增加请求）
- 测试时务必真机打开 Chrome DevTools 的「Rendering」面板，勾选「Emulate CSS media feature prefers-reduced-motion」和「Device scale factor」，观察不同缩放下的像素级偏移
别依赖 transform: translateY() 微调
虽然 transform: translateY(-2px) 看似能“修好”对齐，但它会让元素脱离文档流，导致：
- 与相邻文字的行高计算脱节，在多行价格列表中造成上下间距不均
- 触发额外的合成层，低端安卓机滚动时偶现闪烁
- 无法响应系统字体大小调节（如 iOS「更大字体」辅助功能开启后，transform 值不再适用）
真正需要像素级控制的场景极少，绝大多数问题根源是字体栈或 flex 布局没写对。如果必须用 transform，请用 calc() 动态计算：transform: translateY(calc(0.1em * -0.6))，至少保留相对性。
对齐这件事，表面是 vertical-align 或 flex 的选择，底层其实是字体度量和渲染管线的博弈。越想“精确到像素”，越要先放弃像素思维——用 em、用 font-feature-settings、用真实设备测 baseline，比硬调 transform 可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
