在Chrome上放大时,图像精灵会变得不对齐

Question

在缩放时在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%时仍然会发生这种情况.

Answer 1

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

<img src="data:image/png;base64,yourbase64stringhere" >

现在您需要做的就是隐藏图像的一部分（例如右侧的 66.6%）。为此，您可以使用剪辑路径，或者您可以只剪切精灵，以便只有一个竖起大拇指的图标。