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

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

标记：

<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结合的填充将无法正常工作.

有什么想法可以改进吗？
提前致谢….

通过将图像移出视线来隐藏图像的标准方法是使用文本缩进：-9999em或类似的东西.它需要非常大的Opera和ems工作得很好,因为它们可以随着字体大小的任何变化而扩展.设置line-height也是个好主意：0;字体大小：0;因为有时候喜欢增加额外的空间.如果使用text-indent,则不应该使用填充来隐藏文本.