Question

我正在使用jQuery在几个div元素（在包裹div内）动态加载CSS Sprites。大部分时间这都很好。然而，一位用户现在告诉我，精灵根本就没有出现。不幸的是，很难为它创建一个jsFiddle，因为这种情况大多不会发生。

由于它是使用PhoneGap Build构建的应用程序，因此使用webkit浏览器显示应用程序。是否存在可能导致此行为的sprite和Android / Webkit浏览器的已知问题？

提前致谢！

编辑：当然我可以显示一些代码，为简单起见，我只会使用一个图像 - div（获取精灵）

<div id="wrapper">
    <div id="image0"></div>
</div>

标记是

#wrapper div[id^="image"] {
    z-index: 10;
}

（不应该做太多）并且sprite被初始化（我编辑了循环条件）

for (<i>) {
    $('#image' + i).css('background-image', 'url(img/myimage.png)')
           .css('background-size', (2*someVar) + 'px')
           .css('background-position', '0 -' + (2*i*someVar) + 'px');
}

另一段代码正确地调整了div的大小。就像我说的：它在我测试的每个地方都能正常工作，但有一位用户告诉我他遇到了问题。

Answer 1

问题很可能是精灵对于移动浏览器来说太大了。通过文件大小或分辨率。尝试将精灵分成两个文件，看看是否有帮助。

我有一个类似的问题，精灵没有出现在iOS上，因为它们太大了。

Answer 2

几天前我遇到了同样的问题（在IOS上一切都很好但在Android上却没有）。所以经过一些尝试，我发现如果你只是传递background-repeat: no-repeat;属性（希望如此），你就会解决问题。

CSS Sprites没有出现在Android上

2 个答案: