有空锚标签可以吗？

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隐藏它，但我从来不喜欢various reasons的方法。我的代码是否跨浏览器兼容？

Answer 1

这是有效的，但最好是你确实在那里放了一些东西并使用了像

这样的东西

font-size: 0;

隐藏它。这样，如果有人没有CSS（例如屏幕阅读器），他仍然能够分辨出链接的内容。

<强> Here's a great article on the subject

Answer 2

根本不可行，因为它打破了基本的可访问性原则。无法为背景图像指定替代文字，您可以使用alt标记中的img属性为内容图片指定它。请参阅WCAG 2.0 Guideline 1.1。

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

Answer 3

完全有效，但如果您愿意，可以在里面留一个空格：&nbsp;

Answer 4

使用＆amp; nbsp;作为文本，你很好。

Answer 5

在Markup.tips上，我们最近在iOS 8中进行了一些辅助功能测试，发现VoiceOver不会导航到空链接。必须至少有一个不间断的空间。这是否应该被视为iOS错误我们不确定。