Question

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

Answer 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.