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 中，因为与溢出结合使用的填充：隐藏不会按预期工作。
有什么想法可以改进吗？ 提前致谢....
I'm using this code to display sprite driven icons (if graphics are available only the icons should show up, for other devices the text is supposed to help):
Markup:
<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; }
The sprite itself is working fine in any browser, but the text shows up in Opera and Chrome for some reason because the padding in conjuction with overflow:hidden won't work as supposed.
Any ideas how this could be improved?
Thanks in advance....
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
通过将图像移出视线来隐藏图像的标准方法是使用
text-indent:-9999em或类似的方法。对于 Opera 和 em 来说，它需要很大，因为它们会随着字体大小的变化而缩放。另外，设置 line-height:0; 也是个好主意。 font-size:0; 对于 ie，有时喜欢添加额外的空间。如果您使用text-indent，则不需要填充来隐藏文本。The standard way of hiding images by shifting them out of sight is to use
text-indent:-9999emor something similar. It needs to really big for Opera and ems work well as they'll scale with any change in font size. Also it's a good idea to setline-height:0; font-size:0;for ie which sometimes likes to add extra space. You shouldn't need the padding to hide the text if you usetext-indent.尝试使用负文本缩进。
Try negative text-indent instead.
我不知道您是否只需要图标（16x16 框）或带有描述性文本的图标。不管怎样，如果你只需要 16x16 的盒子，你可以隐藏文本
I don't know if you need just icon (16x16 box) or icon with descriptive text. Anyway, if you need just 16x16 box, you can hide text just by