Css 在Chrome上缩放时，图像精灵会变得不对齐

在Chrome上，当您缩放时，带有图像精灵的图标会错位。当您沿着背景图像向下走得更远时，该位置似乎略有下降。这只发生在Chrome中

这是CSS

.feature-icon {
    height: 22px; 
    width: 22px;
    display: inline-block;
    background-image:url(feature-icon-sprite.png);
    background-size: 22px;
}
.schedule {
    background-position: 0 0; 
}
.selections {
    background-position: 0 -22px; 
}
.messages 
    background-position: 0 -44px; 
}
...

这是HTML

<span class="feature-icon schedule"></span>
<span class="feature-icon selections"></span>
<span class="feature-icon messages"></span>

---

我在网上看到过类似这样的文章。听起来像是放大Chrome时的像素舍入问题。我尝试将大小更改为20px以避免出现问题，但在放大110%时仍然会发生这种情况

图像的完整版本似乎是三个“竖起的大拇指”挨在一起。您可以使用以下内容替换sprite元素（我根据您提供的示例进行了尝试，并且扩展得非常好）：

---

现在，您只需隐藏图像的一部分（例如，右侧的66,6%）。为此，您可以使用，或者您可以直接切断精灵，这样只有一个竖起大拇指的图标。

我认为您可以使用“自动”添加背景大小来解决此问题。这对我有用

.thump {
  background-size: auto 100%; 
}

仅当所有图标在一行或一列中对齐时，此选项才有效。（在列中对齐时，它应为：

100%auto

）。更像下面的公式：

background-size: auto 100%/(rows);

background-size: 100%/(columns) auto;

使用这种样式，背景图像将根据需要固定到div中

---

希望它能帮助你

似乎将

的背景大小设置为自动。功能图标将起作用：

.feature-icon {
  background-size: auto;
}

图像并没有变得不对齐，但可能您并没有提供所有必要的CSS来检查它

您可以查看更多详细信息。
我认为添加时没有问题

background-size: cover;
background-repeat: no-repeat;

到代码笔…
您可以发布工作url吗。将缩放更改为50%或更高（缩小）时，可以看到精灵的其他部分。我注意到它对REM单位的影响远大于px，但也可能取决于图像大小。@MokonaModoki在该代码笔中，似乎通过添加
背景大小：300%来修复
到
。竖起大拇指图片
类。请与我们共享有问题的URL！！1） 我的代码笔来自上一条评论，有50%或更少的缩放问题：；2） 问题中列出的一个链接：搞乱背景尺寸确实有帮助。请注意，codepen示例比实际的页面标记简单得多，唯一起作用的是搞乱了bgsize。
background-size: cover;
background-repeat: no-repeat;