我创建了一个 sprite，其中包含我在 Web 应用程序中使用的一整套图标。但是，我在设置链接样式时遇到了问题。我知道使用 CSS 我可以操纵链接的大小并移动它的背景图像( Sprite )，所以我只在 Sprite 中显示我想要的图标。这对于没有文本的链接非常有用。但是，如果我有一个带有背景图片和附加文本的链接，那就是我遇到问题的地方。
看看这些图片，这将解释我的困境:
- 图标 Sprite :https://picasaweb.google.com/lh/photo/vN74tYI2lsdjOCpvdLjdPBV2JJooBc4dMF1MOKsl3b4?feat=directlink
- 困境:https://picasaweb.google.com/lh/photo/UkC1dP7Fzxv02f_xjX-AEBV2JJooBc4dMF1MOKsl3b4?feat=directlink
我知道我可以在 CSS3 中“剪辑”背景图片，但我现在正试图避免这种情况，因为我知道主要是较旧的浏览器 [如 IE8 X(] 将访问该站点，并且不会看到这个变化。有没有一种方法可以做到这一点，而无需在每个链接中放置额外的标签，例如 <span> 标签并设置它们的样式？我已经看到了可以使用 AJAX 库(如 jQuery)来帮助这，但对于一个小任务来说，这是很多汗水。
我希望这不会造成混淆。
最佳答案
使用 jQuery 这实际上非常简单:只需为所有这些元素分配一个公共(public)类，如 sprite。现在您可以检查它是否是 IE8 并运行此代码:
$('.sprite').toggleClass('sprite').prepend('<span class="sprite"/>')
这会创建一个带有 sprite 类的 span。使用一些巧妙的 CSS，您应该能够将背景移动到具有 sprite 类的元素。
关于jquery - 背景图像定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6033643/