图标与文字错位根本原因是字体渲染和行高计算导致基线浮动，应统一用flex+align-items:center、固定图标尺寸、line-height:1、inline-flex包裹svg或改用background-image。
flex容器里图标和文字总差1像素，怎么调？
根本原因不是css写错了，而是字体渲染和行高计算的隐性叠加。浏览器对font-size和line-height的处理会让文字基线（baseline）实际位置浮动，而svg或i标签默认按vertical-align: baseline对齐，两者天然错位。
- 别依赖
margin-top硬调——换字体、缩放、DPR变化时立刻失效 - 统一用
display: flex+align-items: center替代vertical-align - 确保图标尺寸明确：比如
width: 16px; height: 16px;，避免em或rem导致缩放不一致 - 文字容器加
line-height: 1（非normal），切断行高继承干扰
SVG图标嵌入后和文字上下不对齐，为什么？
svg本身没有基线概念，但父元素设了vertical-align或它被当内联元素渲染时，会按其外框底部对齐，而文字按x-height+降部对齐。这差值常在1–2px之间，尤其在font-size: 14px这种常见字号下最明显。
- 给
svg加vertical-align: -0.125em是经验解，但只适用于等比缩放图标 - 更稳的方式：把
svg包进span，设display: inline-flex; align-items: center; - 如果用
background-image方式插入图标，就完全避开基线问题，但牺牲语义和颜色控制
使用iconfont时文字偏上或偏下
iconfont本质是字体字符，它的垂直定位由字体文件的ascent/descent和当前font-size共同决定，不同字体厂商导出的ttf/woff对齐基准不一致。
- 不要改
font-size单独调位置——会同时缩放图标和文字，比例失衡 - 优先用
transform: translateY(-1px)微调，只动位置不动尺寸 - 全局统一
font-display: optional，防止字体加载完成前回退到系统字体造成跳变 - 检查是否启用了
text-rendering: optimizeLegibility，它可能加剧字形渲染差异
响应式场景下对齐突然崩了
媒体查询里只改font-size，但忘了同步重设图标尺寸或line-height，或者用vw单位定义图标宽高却没约束最小值，导致小屏下图标被压缩变形。
立即学习“前端免费学习笔记（深入）”；
- 图标尺寸建议用
clamp(14px, 0.8vw, 20px)，兼顾可读性与比例 - 文字容器的
line-height必须用无单位数值（如1.2），禁用px或em - 在
@media (prefers-reduced-motion: reduce)下禁用transform微调，改用margin保底
像素级对齐真正的难点不在代码写法，而在你得同时盯住字体度量、设备像素比、图标渲染引擎、以及浏览器对flex基线的实现差异——哪怕所有CSS都写对了，换台MacBook Pro用safari打开，也可能差半像素。