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

与其使用左/右/下定义背景位置，不如尝试使用像素精确定义它。

例如

background-position: XXpx XXpx;

此外，请确保您的精灵中的这两个图像都是 18 像素 x 17 像素，因为这就是类所说的图像大小。