The bug I'm trying to describe here is when you have markup similar to this:

<div class="wrapper">
    <img src="logo.jpg" alt="Logo" />
    <a href="/somewhere">&nbsp;</a>

The goal we are trying to reach is to have the entire "wrapper" element clickable but the <a> tag is not wrapping the actual contents. There are various scenarios where you would do this, as wrapping large areas in a link tag can be either problematic or semantically incorrect.

The solution to make the above wrapper element fully clickable would be to set the wrapper to position: relative and the link to position: absolute, filling the container, like so:

.wrapper {
    position: relative;

.wrapper a {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: block;

Now this solution works just fine in almost all browsers, but (almost understandably) Internet Explorer won't let you click on the <img> or <h1> tags since they are not actually nested within the <a> tag, only the surrounding content.

To fix this, the solution is simply (yet confusingly) to give the link a background image and then all versions of Internet Explorer will place nice.

The best way to do this is to create a 1x1 pixel sized transparent GIF and use it as a repeating background.

Adding the following code will solve this bug:

.wrapper a {
    background: url('blank.gif') top left repeat;

This appears to be another classic IE hack but at least it does not invalidate your CSS or require any complicated filters, JavaScripts or plugins.