Chrome中的错误还是糟糕的CSS？ （隐藏可见性的锚点）

Question

在任何HTML中测试这个简单的行：

<a href="anything"><span style="visibility:hidden;">insible text here</span></a>

（您可以直接从此处测试：http://jsfiddle.net/wqS3E/）

在Firefox和IE中你可以点击链接（更多，你可以看到默认的下划线装饰） 但是在Chrome（v 13.0.782.220）中无法点击/查看链接。

这是Chrome中的错误还是我的CSS不正确？

我有一个带有背景图片的<li>元素，有些<li>是链接，我希望能够点击这些链接，但我不希望它们可见，因为我想要在<li>中显示背景图像（我不想制作HTML标记），所以这就是我所拥有的：

<ul>
    <li>
       <a href="link"><span class="invisible">some text</span></a>
    </li>
    ...
</ul>

.invisible {
   visibility:hidden;
}

Answer 1

我不确定<a>内的隐形内容是否存在标准行为。

但是，我注意到将display设置为block或inline-block会使链接在Chrome中可以点击。不确定其他浏览器，但如果他们已经显示它，那不应该破坏它。

Answer 2

如何将<span>放在<a>而不是其他地方？

<span class="invisible"><a href="link">some text</a></span>

Answer 3

逻辑上，链接应该是可点击的。设置visibility:invisible应该这样做，使其不可见，但不影响功能。

作为类比，如果Chrome的行为是正确的，那么Active Camouflage应该让你在Halo中无懈可击。

总的来说，Chrome中的错误似乎对我而言。特别是因为Firefox同意IE - 这种情况不常发生！