3

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

标记：

<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; }

sprite 本身在任何浏览器中都可以正常工作，但由于某种原因，文本显示在 Opera 和 Chrome 中，因为与溢出结合的填充：隐藏不会按预期工作。

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

4

3 回答 3

4

通过将图像移出视线来隐藏图像的标准方法是使用text-indent:-9999em或类似的东西。对于 Opera 和 em 来说，它需要非常大才能很好地工作，因为它们会随着字体大小的任何变化而缩放。设置 ie 也是一个好主意，line-height:0; font-size:0;它有时喜欢增加额外的空间。如果您使用text-indent.

于 2010-07-15T19:26:13.110 回答
2

尝试否定文本缩进。

.icon { display:block; width:16px; height:16px; text-indent: -9999px; background:transparent url(sprite.png) 0px 0px no-repeat; }
于 2010-07-15T19:25:41.977 回答
1

我不知道您是否只需要图标（16x16 框）或带有描述性文字的图标。无论如何，如果您只需要 16x16 框，您可以通过

.icon { display:block; width:16px; height:16px; background:transparent url(sprite.png) 0px 0px no-repeat; text-indent:-9999px; }
于 2010-07-15T19:25:12.803 回答