Empty anchor text not clickable in IE browsers CSS tricks

As always I find something new issue in Internet Explorer related to css and functionality. This time it was anchor text which displays as block but isn't clickable. I replaced the empty space ( ) with some text then found that only the area text covers was actually clickable.

After clicking through few sites from google search result, I found one cool trick which solves this issue. and it is: background-image:url(about:blank);

This is how I had in styles.css stylesheet file:

#slide_content ul li a {
    bottom: 0;
    display: block;
    height: 305px;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 345px;
    z-index: 2;
}

I added below in IE specific stylesheet file (styles-ie.css):

#slide_content ul li a {
     background-image:url(about:blank);
}

So that solved the issues that was with IE browsers version IE7 and IE8. Didn't tested in IE6.

Some other tricks that I didn't need to apply but found and could be used were: (none tested from below)

#slide_content ul li a {
    text-indent:-9999px;
    background:url(transparent-image.png) no-repeat;
}

or,

#slide_content ul li a {
    background-color: white;
    opacity:0;
    filter: alpha(opacity=0);
}

or, use exact size transparent image inside anchor like this:

<a href="#fix">
     <img src="transparent-image.gif" style="width: 345px; height: 305px"/>
</a>

Finally, one more css trick:

#slide_content ul li a {
    zoom: 1;
    position: relative;
}