Chrome 中的错误或糟糕的 CSS？（隐藏可见性的锚点）答案

【问题标题】：Bug in Chrome or bad CSS? (anchor with visibility hidden)Chrome 中的错误或糟糕的 CSS？（隐藏可见性的锚点）
【发布时间】：2011-11-24 12:20:57
【问题描述】：

在任何 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;
}

【问题讨论】：

已在 Chrome 14 和 Safari 5.1 中验证。
当我向链接添加背景颜色时，它就在那里并且可以在 Chrome 中点击。但是没有一些可见的方面，是的，看起来它没有渲染。
是的，我也注意到了@cHao。更重要的是，如果您从 Chrome 打开开发者工具，并在其中添加背景颜色，您可以看到并单击链接，现在再次禁用背景颜色，您仍然可以单击链接！。真的很奇怪。

【解决方案1】：

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

打个比方，如果 Chrome 的行为是正确的，那么主动伪装应该会让你在 Halo 中无懈可击。

总的来说，对我来说似乎是 Chrome 中的一个错误。特别是因为 Firefox 与 IE 一致——这种情况并不经常发生！

【讨论】：

【解决方案2】：

我不确定<a> 中的不可见内容是否有标准行为。

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

【讨论】：

【解决方案3】：

将<span> 放在<a> 周围怎么样？

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

【讨论】：

如果链接不可见，是否仍可点击？
不在 Firefox 6 或 chrome 14 中
有点违背了目的，不是吗？ :)
不，这样你就不能在任何浏览器中点击链接，不仅是 Chrome（根据@BoltClock，Safari 似乎也有同样的行为）。请记住，我想要锚点（我的意思是我想点击链接）而不是锚点的内容（因为我想要
中的图像）

我认为你需要重新考虑你的问题。