CSS Sprites 未在 Android 上显示

Posted 2023-05-07

【中文标题】CSS Sprites 未在 Android 上显示

【英文标题】：CSS Sprites not showing up on Android

【发布时间】：2012-10-02 22:16:27

【问题描述】：

我正在使用 jQuery 在几个 div 元素（在包装 div 内）上动态加载 CSS Sprite。大多数情况下，这工作正常。然而，一位用户现在告诉我，精灵根本没有出现。不幸的是，很难为它创建一个 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 的大小。就像我说的：在我测试它的任何地方都可以正常工作，但一位用户告诉我他遇到了问题。

【问题讨论】：

它是否可以在 PC 或 Mac 上的 Chrome 或 Safari 上运行？

对我来说，在 Firefox 和 Chrome 上都可以在 PC 上正常工作。

这很奇怪！ :O可以发一些代码吗？

我会把它编辑成问题！

哇，你是通过 javascript 加载这个的吗？好吧，一个愚蠢的问题。您是否包括了 jQuery，而不是 jQM？ :P

【参考方案1】：

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

我也遇到过类似的问题，精灵在 ios 上没有显示，因为它们太大了。

【讨论】：

哇——很抱歉，我没有看到你的答案。其实我现在知道的更多了。正在显示精灵，但由于某种原因，它的大小不正确（它在容器内过于频繁地重复）。我非常怀疑这是一个分辨率问题，因为这个用户的分辨率真的很低，我根据分辨率加载了一个精灵集，所以他手机上使用的图像真的很小。如果它在最新版本中运行，我还没有任何反馈，所以让我们拭目以待。

在我的公司里，我们一直在疯狂地试图找出导致精灵到处透明的原因，而这个答案恰到好处！我们向精灵添加了一些新图像，然后它停止显示其中任何一个

【参考方案2】：

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