背景图像/位置渲染在iPad上有所不同

Question

我有一个div，它有一个精灵背景图像的两个背景位置之一，具体取决于php脚本中div的类设置。

下面的CSS在标准浏览器上运行良好，但在iPad上我看不到相同的情况。相反，我看到的背景图像比我想要的更多。正如你从下面的图片中看到的那样，我不仅仅看到一颗恒星，而是看到了另一颗恒星的一部分。

如何在iPad上正确显示背景位置/图像？

.normal, .favourite {
    width:18px;
    height:17px;
    margin-right: 4px;
    border:none;
    cursor: pointer;
    display:inline-block;
    vertical-align: middle;
    background-color:transparent;
    background-repeat: no-repeat;
}

.normal {
    background-image: url('/images/playlist_sprite.png');
    background-position: left bottom;
}

.favourite {
    background-image:url('/images/playlist_sprite.png');
    background-position: right bottom;
}

Answer 1

不是使用左/右/底部定义背景位置，而是尝试使用像素精确定义背景位置。

e.g。

background-position: XXpx XXpx;

另外，请确保精灵中的这两个图像都是18px乘以17px，因为这是该类所说的图像尺寸。