Chrome或错误的CSS中的错误？ （隐藏可见性的锚） [英] Bug in Chrome or bad CSS? (anchor with visibility hidden)

问题描述

在任何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>一些文字< / span>< / a> 
< / li> 
 ... 
< / ul> 
 
 .invisible {
 visibility：hidden; 
 
  

解决方案

我不确定有没有在< a> 内的隐形内容的标准行为。

然而，我注意到设置显示为 block 或 inline-block 在Chrome中可点击。不确定其他浏览器，但如果他们已经显示它，那不应该打破它。

Test this simple line in any HTML:

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

(you can test it directly from here: http://jsfiddle.net/wqS3E/ )

In Firefox and IE you can click the link (even more, you can see the default underline decoration).
But in Chrome (v 13.0.782.220 ) is not possible to click/see the link.

Is this a bug in Chrome or my CSS is not correct?

I have a <li> element with a background image, and some <li> are links, and I want to be able to click those links, but I don't want they visibile because I want to show the background image in <li> (and I don't want to brake the HTML markup), so this is what I have:

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

.invisible {
   visibility:hidden;
}

解决方案

I'm not sure there's a standard behavior for invisible stuff inside an <a>.

However, i've noticed that setting the display to either block or inline-block makes the link clickable in Chrome. Not sure about other browsers, but if they already display it, that shouldn't break it.

这篇关于Chrome或错误的CSS中的错误？ （隐藏可见性的锚）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！