CSS精灵 - 在缩放时显示另一个图像的一部分

Question

我有跟随 CSS精灵.当我尝试显示第一个图标时,它工作正常,但当我将缩放设置为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%缩放时的样子:

更新:克里斯建议我需要在图标之间放置一些空格.所以我的问题是:为什么？为什么即使没有这个空间,它在Mozilla Firefox上运行良好？

Answer 1

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

所以,当你的zoom就是150%,你有29x29像素的图片,您的浏览器需要渲染43.5x43.5像素的图片.每个浏览器的每个版本如何围绕它？我们不知道,也许是43x43px,也许是44x44px.有关于精灵和变焦的文章.

我用两对图像创建了新的代码片段.第一对使用你的图像精灵,第二对 - 我的.我将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浏览器,请查看本文.

现在你可以使用一些有用的东西gulp/ grunt自动生成精灵在这里你可以设置图像之间的差距/保证金.看到这个.