CSS图标带有一些语义文本，浏览器兼容性问题

我正在使用此代码显示精灵驱动的图标（如果图形可用，则只显示图标，对于其他设备，文本应有帮助）：

标记：

<span class="icon ok">OK</span>

精灵本身在任何浏览器中都可以正常工作，但文本会在Opera和Chrome中显示，原因是与overflow:hidden组合的填充将无法正常工作

有什么办法可以改进吗？

---

提前感谢……

我不知道您需要的是图标（16x16框）还是带有描述性文本的图标。无论如何，如果您只需要16x16个框，您可以通过以下方式隐藏文本

.icon { display:block; width:16px; height:16px; background:transparent url(sprite.png) 0px 0px no-repeat; text-indent:-9999px; }

---

尝试使用负文本缩进

.icon { display:block; width:16px; height:16px; text-indent: -9999px; background:transparent url(sprite.png) 0px 0px no-repeat; }

---

通过将图像移出视线来隐藏图像的标准方法是使用

文本缩进：-9999em

或类似的方法。对于Opera和ems来说，它需要非常大，因为它们可以随着字体大小的变化进行缩放。另外，最好将

行高度设置为0；字号：0用于有时喜欢添加额外空间的ie。如果使用
文本缩进
，则不需要填充来隐藏文本

.icon { display:block; width:16px; height:16px; text-indent: -9999px; background:transparent url(sprite.png) 0px 0px no-repeat; }