雪碧图 background-position 用百分比 图标整体偏 20px

图标从单张切成雪碧图后整体偏了 20 像素，边缘还带出相邻图标的半截，换成像素值就正常。碰到这种情况，我一般先确认改动有没有真的生效。

原因不复杂，百分比定位按容器宽减图片宽来计算，容器尺寸和图标尺寸不一致时算出来的偏移就偏。设计稿给的是像素坐标，不能直接当百分比用。

「雪碧图百分比定位」相关的验证我通常做两遍，改完一次、隔天再看一次，确认不是临时生效。别只看报错的最后一行，往上看几行，真正的起因通常在上面。

.icon-search {
  width: 24px; height: 24px;
  background: url('sprite.png') no-repeat -48px -24px / 240px 240px;
}

同类问题如果隔一段时间又出现，多半是某个定时任务或重启流程把改动冲掉了。把这次用到的命令存进笔记，比记住结论有用，换个环境还能照着走。

具体做法是，量出图标在雪碧图里的实际像素坐标 直接用负值写定位；容器宽高固定成和图标一致 避免缩放引入误差；背景图设 background-size 固定尺寸 别让它跟着容器拉伸。

最后用这个标准收尾，图标完整落在 24×24 的框里，边缘不再带出相邻图标。