html - How to make an empty anchor tag clickable in IE7?

Question

I need to make an area within a background image clickable to generate an event for JavaScript use. So, I created an anchor tag and inside that I inserted some relevant text between semantically meaningless tags which I then made hidden:

<a href="#"><i>foo</i></a>

Then I gave the anchor tag 'display:block' properties, width and height values, and absolutely positioned it where I needed it to be in relation to the background image. In Firefox this works nicely - I hover over and my cursor changes as expected - I've got something clickable. IE7 however, doesn't like the fact that the anchor tag is 'empty' and therefore doesn't treat it as clickable. So I added this to the anchor tag in css:

background:url(/no-image.jpg); 

...which seems to fool IE7 into assuming something is there. IE7 now treats the area as clickable, even if no background image actually exists for the anchor tag. But this seems like a bit of a hack to me and I'm wondering if there is a more elegant way to deal with this problem. Any ideas would be greatly appreciated. Thanks.

Answer 1

You've found a rendering problem with IE, and according to @Simon below the issue still exists at least through IE9.

Your background: hack will work, but the browser will make an HTTP request each time to resolve the bogus URL. This may hurt the performance of your page. To achieve the same result but not make an unnecessary HTTP request, I'd suggest using this URL instead:

background-image:url(about:blank);

about:blank is a special URL that browsers show as an empty page, so it won't affect how the element is displayed, but it also won't make any HTTP requests either.

BTW, the problem only happens when you have an absolutely or relatively-positioned A element (or an A element inside a positioned block). Regular non-positioned hyperlinks don't seem to have this problem under IE7.