有空锚标签可以吗？

Question

我知道如果我想将图像转换为可点击链接,我可以执行以下操作:

<a href="http://twitter.com/username"><img src="icons/twitter.png" /></a>

但我更喜欢使用CSS背景图像,以便我可以拥有悬停状态:

<a class="twitter" href="http://twitter.com/username"></a>

# css
.twitter{display:block; width:16px; height:16px; background:url("twitter.png")}

这工作正常,但我不确定拥有一个什么都不包含的锚链接是完全有效的.Chrome渲染效果很好,FF也是如此,但我不确定其他人是否相同.

我意识到我可以在链接中放入一些文本,并将其隐藏起来text-indent: -9999px,但出于各种原因我从未喜欢过这种方法.我的代码是否跨浏览器兼容？

Answer 1

这是有效的,但最好是你确实把东西放在那里并使用类似的东西

font-size: 0;

隐藏它.这样,如果有人没有CSS(例如屏幕阅读器),他仍然能够分辨出链接的内容.

或者`font-size:0;`,或许,但任何基于'em`单位的相对大小都可能受到严重影响. (3认同)
@Truth,请让我高兴并告诉我你在什么情况下没有启用CSS.任何现代页面设计都依赖于启用CSS的事实,除非该页面是**明确地为该情况设计的.对于屏幕阅读器而言,空间无关紧要 (3认同)
@JaimeOlivares:嗯,没有.当**专业**制作网页时,他确保他的网页**可用**和**可用**,启用0 CSS或JavaScript.对于屏幕阅读器而言,空间无关紧要,只能证明我的观点.有屏幕阅读器的人无法分辨链接上的内容. (3认同)
或任何各种图像替换技术:http://css-tricks.com/css-image-replacement/ (2认同)
@JaimeOlivares:对屏幕阅读器有什么用？或者没有启用CSS的人？网站用于**内容**,而不是**漂亮**. (2认同)

Answer 2

它根本不行,因为它打破了基本的可访问性原则.无法以相同的方式为背景图像指定替代文本,并且应使用标记中的内容图像alt属性指定它img.参见WCAG 2.0 指南1.1.

如果您希望在鼠标悬停时更改图像,可以使用CSS和JavaScript技术.