1

我正在使用 jQuery 在几个div元素（在 wrapping 中div）动态加载 CSS Sprites。大多数情况下，这工作正常。然而，一位用户现在告诉我，精灵根本没有出现。不幸的是，很难为它创建一个 jsFiddle，因为这通常不会发生。

由于它是使用 PhoneGap Build 构建的应用程序，因此使用 webkit 浏览器来显示该应用程序。是否有任何关于精灵和 Android/Webkit 浏览器的已知问题可能导致此行为？

提前致谢！

编辑：当然我可以展示一些代码，为简单起见，我只会使用一张图片div-（得到一个精灵）

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

标记是

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

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

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 的大小。就像我说的：在我测试它的任何地方都可以正常工作，但是一位用户告诉我他遇到了问题。

4

2 回答 2

2

问题很可能是精灵太大而无法使用移动浏览器。按文件大小或分辨率。尝试将精灵分成两个文件，看看是否有帮助。

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

于 2012-10-15T15:11:51.583 回答
0

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

于 2017-06-21T00:36:53.083 回答