css - 在 Chrome 上缩放时，图像 Sprite 变得不对齐

Question

在 Chrome 上，当您缩放时，带有图像 Sprite 的图标会错位。当您进一步向下移动背景图像时，该位置似乎略有下降。这只发生在 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

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

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

这仅在所有图标在一行或一列中对齐时有效。(当列时，它应该是:100% auto)。更像下面的公式:

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

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

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

希望对您有所帮助。