align-items: baseline 对齐的是每个子元素第一行文本的字体基线，而非视觉中心或盒底边；它受字体度量影响，多行时仍只取首行基线，易因换行、字体差异、浏览器实现不一而错位。
align-items: baseline 的对齐基准不是视觉中心
它对齐的是每个子元素**第一行文本的基线（baseline）**，而不是元素盒子底部、也不是人眼感知的“文字底边”。这个基线位置由字体自身的排版参数决定：x-height、ascender、descender、em-square 都会影响其在容器中的垂直坐标。同一行里 font-size: 24px 的 Helvetica 和 font-size: 24px 的 Noto Sans，基线在像素级位置上可能差 1–2px——浏览器不统一渲染字体度量，CSS 也不提供归一化接口。
Firefox 默认触发 baseline 对齐，Chrome/Safari 常 fallback 到 stretch
当 Flex 容器是 flex-direction: row，且子项混有文字、<input>、<img alt="为什么CSS Flex布局会导致文字基线对齐产生微小的像素偏差" > 等替换元素时：
- Firefox 严格按规范走
align-items: baseline（即使你没显式写） - Chrome 和 Safari 在某些条件下会隐式 fallback 到
stretch，导致同一段 CSS 在不同浏览器中渲染高度不一致 - 结果就是按钮底边比旁边文字低一截，或换行后整行“上浮”
解决办法很简单：不要依赖默认值，显式声明 align-items: flex-start 或 align-items: center。
文字换行后，baseline 位置动态变化
如果一个 <span></span> 内容过长自动折成两行，它的基线就不再是首行基线，而是**最后一行的基线**（CSS 规范定义）。但 align-items: baseline 仍只取第一行——这就造成多行文字与单行图标/输入框之间错位。
立即学习“前端免费学习笔记（深入）”；
更稳妥的替代是：
- 用
align-items: last baseline（现代浏览器支持，含 Firefox 100+、Chrome 119+） - 或彻底放弃 baseline，改用
align-items: center+white-space: nowrap控制单行 - 若必须支持 IE 或老 Chrome，用
display: inline-flex+vertical-align: -0.125em微调
字体加载、缩放、DPR 共同放大偏差
微小偏差在以下场景会被显著放大：
- 用户将浏览器缩放设为 125% 或 150%，而图片用
px单位、文字用rem，缩放比例不一致 - Web Font 还未加载完成，回退字体（如 Times New Roman）的基线位置与目标字体不同
- 高 DPI 屏幕（2x/3x）下，1px 偏移被渲染为物理像素的非整数倍，出现模糊或亚像素错位
真正卡住人的从来不是“怎么对齐”，而是“为什么刚调好，一缩放/一换字体/一换浏览器就偏了”。对齐逻辑必须脱离字体度量和渲染差异，落到可控的布局模型上——比如每个图文组合独立 display: flex，而不是靠外层猜。
