Bug in Chrome or bad CSS? (anchor with visibility hidden)

问题

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;
}

回答1:

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.

回答2:

How about putting the <span> around the <a> instead of otherwise?

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

回答3:

Logically the link should be clickable. Setting visibility:invisible should do just that, make it invisible, but otherwise not affect function.

As an analogy, if Chrome's behaviour were correct then the Active Camouflage should make you invulnerable in Halo.

Overall, seems like a bug in Chrome to me. Especially since Firefox agrees with IE - that doesn't happen often!

来源：https://stackoverflow.com/questions/7543696/bug-in-chrome-or-bad-css-anchor-with-visibility-hidden

标签

css

google-chrome

visibility

hidden