我正在使用此代码显示精灵驱动的图标（如果图形可用，则只显示图标，对于文本应该有帮助的其他设备）：
标记：
<span class="icon ok">OK</span>
CSS：
.icon { display:block; width:16px; height:16px; padding-left:40px; overflow:hidden; background:transparent url(sprite.png) 0px 0px no-repeat; }
.ok { background-position: -16px 0px; }
精灵本身在任何浏览器中都能正常工作，但由于某些原因，文本显示在Opera和Chrome中，因为与overflow：hidden结合使用的填充将无法正常工作。
有什么想法可以改进吗？ 提前谢谢....
答案 0 :(得分：4)
通过将图像移出视线来隐藏图像的标准方法是使用text-indent:-9999em或类似的东西。它需要非常大的Opera和ems工作得很好，因为它们可以随着字体大小的任何变化而扩展。同样最好设置line-height:0; font-size:0;即有时候喜欢添加额外空间。如果使用text-indent，则不应该使用填充来隐藏文本。
答案 1 :(得分：2)
尝试使用否定文字缩进。
.icon { display:block; width:16px; height:16px; text-indent: -9999px; background:transparent url(sprite.png) 0px 0px no-repeat; }
答案 2 :(得分：1)
我不知道您是否只需要图标（16x16框）或带描述性文字的图标。无论如何，如果你只需要16x16的盒子，你可以只隐藏文字
.icon { display:block; width:16px; height:16px; background:transparent url(sprite.png) 0px 0px no-repeat; text-indent:-9999px; }