在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>

我在互联网上看过像this这样的文章。听起来像Chrome中有一些像素舍入问题。我已经尝试将大小更改为20px以避免出现问题，但在缩放110％时仍然会发生这种情况。

Answer 1

我认为您可以使用auto添加背景大小来解决此问题。这适合我。

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

这仅适用于所有图标在一行或一列中对齐的情况。（列时，应为：100% auto）。更像下面的公式：

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

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

使用此样式，您的背景图像将根据需要固定到div中。

希望它可以帮到你。

Answer 2

图片的完整版似乎是三个＆＃39;竖起大拇指＆＃39;彼此相邻。您可以使用以下内容替换sprite元素（我根据您提供的示例尝试了这个，并且这可以很好地扩展）：

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

现在你需要做的就是隐藏图像的一部分（例如右边的66,6％）。为此你可以使用clip path，或者你可以切断精灵，这样只有一个竖起大拇指的图标。

Answer 3

似乎将.feature-icon的自动背景大小设置为自动：

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

图像没有变得不对齐，但也许你没有提供所有必要的CSS来检查它。

您可以查看this fiddle了解详情。

Answer 4

添加

时我没有遇到任何问题

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

到codepen ...