雪碧后退

Question

我在一个精灵图像中包含的页面上有许多图像，由于网站的其他要求，这些图像必须包含在单个精灵中。

虽然这在大多数浏览器中运行良好但我在Opera Mini上遇到问题，它根本不渲染精灵而只是显示整个图像。

当浏览器无法渲染精灵时，是否有可用于提供文本替代的CSS？

Answer 1

有点困惑。精灵没有渲染但显示整个图像？你是一眼就看到了所有精灵，还是根本没看过？

您可以对opera mini（以及渲染未按预期工作的任何其他移动浏览器）使用浏览器检测。

将所需的文本添加到精灵元素，并使用大的负文本缩进来隐藏内容。

禁用不受支持的浏览器的缩进和背景图片。

allbrowsers.css

div.sprite {
  width:20px;
  height:20px;
  background:transparent url(img/mysprites.gif) no-repeat scroll top left;
  overflow:hidden;
  text-indent:-5000px;
}
#first_sprite {
  background-position:20px 40px;
}

mobilebrowsers.css

div.sprite {
  background-image:none;
  text-indent:0;
}

页

<div id="first_sprite" class="sprite">Alternate text</div>