代码之家 › 专栏 › 技术社区 › pagid

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

css-sprites accessibility css

pagid · 技术社区 · 16 年前

我使用这段代码来显示sprite驱动的图标(如果图形可用,则只显示图标,对于其他设备,文本应该有帮助):

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

sprite本身在任何浏览器中都可以正常工作,但由于某种原因,文本会出现在opera和chrome中,因为与overflow:hidden结合使用的填充将无法正常工作。

有什么办法可以改进吗? 事先谢谢……

3 回复 | 直到 16 年前

DHuntrods 16 年前

通过将图像移出视线来隐藏图像的标准方法是使用 text-indent:-9999em 或者类似的东西。它需要非常大的歌剧和特快专递工作,因为他们会随着字体大小的任何变化。另外,这是个好主意 line-height:0; font-size:0; 对于有时喜欢增加额外空间的IE。如果使用 text-indent .

Sarah 16 年前

改为尝试负文本缩进。

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

srigi 16 年前

我不知道您是否只需要图标(16x16框)或带有描述性文本的图标。不管怎样,如果只需要16x16框,可以通过以下方式隐藏文本:

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

推荐文章

Shtole · 我需要为<button>中的装饰性<svg>隐藏aria吗?

1 年前

gallium314 · 我应该使用什么HTML语义来访问自定义计算器的输出?

2 年前

Sheppard25 · 为什么按下Tab键后onBlur会触发onKeyDown?

2 年前

user2933998 · 通过程序更改动态文本,而不必转到“设置”

2 年前

Betulino · 一行中的多个表单字段是否具有良好的可访问性?

2 年前

Takeshi Tokugawa YD · 如何获取“pa11y”中的目标行号和列范围?

3 年前

Yoginath Sumanth · 如何解决PageSpeed Insights诊断可访问性的性能问题部分打问号

3 年前

GurpusMaximus · 如何使用Java PDFBox 2.0.8库创建可访问的PDF,该库也可以使用PAC 2工具进行验证?

8 年前

David Costa · 如何以编程方式在主屏幕之间滚动?

8 年前

Ian Boyd · 如何设置与TEdit控件关联的可访问名称?

8 年前