How to make an empty anchor tag clickable in IE7?

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.

Get rid of the semantically meaningless tags and use normal CSS image replacement, instead.

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

And then the CSS:

a { 
    width:100px; 
    height:100px; 
    display:block; 
    text-indent:-9999px; 
    background:url(/img.png) no-repeat;
}

Add whatever positioning you need, and it should work just fine.