html - CSS Sprite - 缩放时显示另一幅图像的一部分

Question

我有following CSS Sprite 。当我尝试显示第一个图标时，它工作正常，但是当我将缩放设置为 150% 时，我也看到了第二个图标的一小部分。此问题出现在 Google Chrome 和 Internet Explorer 上，但不会出现在 Mozilla Firefox 上:

JSfiddle

div {
    width: 29px;
    height: 29px;
    background-image: url(http://i.imgur.com/O2Cp0nb.png);
}

<div></div>

这就是我在 150% 缩放时的样子:

更新:Chris 建议我需要在图标之间留一些空间。所以我的问题是:为什么？为什么即使没有那个空间它在 Mozilla Firefox 上也能正常工作？

Answer 1

在某些情况下，不同的浏览器可能会使用不同的算法来舍入数字和渲染图像。你可以阅读一些关于它的文章，例如 — this和 this .

因此，当您的缩放为150%并且您有29x29px 图像时，您的浏览器需要呈现43.5x43 .5 像素图像。每个浏览器的每个版本会如何舍入呢？我们不知道，也许 43x43px，也许 44x44px。有 article关于 Sprite 和缩放。

我用两对图像创建了新的代码片段。第一对使用您的图像 Sprite ，第二对使用我的。我将 Facebook 图片大小从 29x29px 增加到 30x30px。尝试缩放它。您可以看到它们在不同的 zoom 比率上存在问题(第一个 — 150%，第二个 — 110%—125 %).

JSFiddle

.fb29 {
    width: 29px;
    height: 29px;
    background: url(http://i.imgur.com/O2Cp0nb.png) no-repeat;
    background-size: 29px;
}

.sun29 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/O2Cp0nb.png) 0 -29px no-repeat;
    background-size: 29px;
}

.fb30 {
    margin-top: 10px;
    width: 30px;
    height: 30px;
    background: url(http://i.imgur.com/mRIPLXO.png) no-repeat;
    background-size: 30px;
}

.sun30 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/mRIPLXO.png) 0 -30px no-repeat;
    background-size: 30px;
}

<div class="fb29"></div>
<div class="sun29"></div>

<div class="fb30"></div>
<div class="sun30"></div>

因此，我的建议是在图像之间添加 1px 以独立于不同浏览器的舍入算法和浏览器错误:

JSFiddle

.fb29 {
    width: 29px;
    height: 29px;
    background: url(http://i.imgur.com/dKxYwhZ.png) no-repeat;
    background-size: 29px;
}

.sun29 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/dKxYwhZ.png) 0 -30px no-repeat;
    background-size: 29px;
}

.fb30 {
    margin-top: 10px;
    width: 30px;
    height: 30px;
    background: url(http://i.imgur.com/1fJyJVK.png) no-repeat;
    background-size: 30px;
}

.sun30 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/1fJyJVK.png) 0 -31px no-repeat;
    background-size: 30px;
}

<div class="fb29"></div>
<div class="sun29"></div>

<div class="fb30"></div>
<div class="sun30"></div>

如果您需要支持旧的 IE 浏览器，请查看 this article .

现在您可以在 gulp/grunt 上使用一些有用的东西来自动生成 Sprite ，您可以在其中设置图像之间的间隙/边距。参见 this .