页面缩放时SVG背景图横向偏移约1px的原因及解决办法

问题情况 #

把SVG设为按钮背景，想让它一直居中，但页面缩放时，背景图偶尔会左右或上下偏移1px左右。具体就是某些缩放级别下，浏览器没法给图片两边分配均等的小数像素——比如本该两边各5.5px，实际变成一边6px、一边5px，导致偏移。

代码示例 #

HTML

<div>
  <button class="my-btn"></button>
</div> 

CSS

.my-btn {
    display: inline-block;
    height: 19.6px;
    width: 19.6px;
    border: none;
    border-radius: 5px;  
    background: url(...) center no-repeat, #f99d1d; 
    background-size: 70%;  
}

问题原因 #

这是浏览器处理小数像素时的舍入规则导致的：

• 按钮宽高是19.6px，SVG背景设为70%尺寸，算下来是19.6×0.7=13.72px。按钮剩下的空间是19.6-13.72=5.88px，平分到两边就是2.94px。
• 页面缩放时，这些小数像素要转换成屏幕物理像素，但浏览器没法渲染半个像素，只能向上或向下取整。这种取整就会让两边的像素分配不均，出现1px偏移。
• 另外SVG虽然是矢量图，但按百分比缩放后算出的尺寸带小数，同样会触发这个舍入问题。

解决办法 #

1. 把按钮尺寸改成整数 #

直接用整数宽高替换小数，从根源避免计算误差：

.my-btn {
    height: 20px; /* 替换原来的19.6px */
    width: 20px;
    border: none;
    border-radius: 5px;  
    background: url(...) center no-repeat, #f99d1d; 
    background-size: 70%;  
}

这样背景尺寸是14px，剩余空间6px，两边各3px，不管怎么缩放，浏览器按整数像素渲染就不会偏移。

2. 给SVG加viewBox确保居中（能改SVG的话用这个） #

如果能编辑SVG文件，给它加viewBox属性并设整数边界，同时让SVG里的图形在viewBox里居中。这样就算缩放出现小数像素，SVG内部图形也能保持相对居中：

<svg viewBox="0 0 24 24" ...>
  <!-- 保证图形在24x24的范围内居中绘制 -->
</svg>

3. 用CSS transform微调（应急用） #

如果没法改尺寸或SVG，可以用transform: translate()抵消偏移，但这是临时方案，不如前两种彻底：

.my-btn {
    /* 原有样式保留 */
    position: relative;
}
.my-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(...) center no-repeat;
    background-size: 70%;
    transform: translate(0.5px, 0.5px); /* 按实际偏移情况调数值 */
}

注意：不同缩放级别可能要调不同数值，适用性有限。

4. 直接写background-position的整数像素值 #

算出整数内边距，直接指定背景位置，不让浏览器自动计算小数：
比如按钮20px宽高，背景14px，两边各留3px：

.my-btn {
    height: 20px;
    width: 20px;
    background: url(...) no-repeat, #f99d1d;
    background-size: 14px;
    background-position: 3px 3px; /* 固定整数位置 */
}

这种方式直接锁定位置，避免舍入误差。

内容的提问来源于stack exchange，提问作者Dmitry Saperov