IE bug: absolutely-positioned element with a non-transparent background colour

I have an absolutely-positioned DIV that I need to trap onclick events for. It turns out that, in IE7, the DIV seems to have no 'footprint' for things like clicking and even cursor. For example:

div {
      width: 200px; height: 200px;
      position: absolute;
      border: 10px solid black;
      cursor: pointer;
}

In IE7, that DIV has no 'footprint': it doesn't react to onclick(), and its cursor doesn't change to the pointer. Curiously, it DOES handle both those over its border - hence the large border in this example. Setting a background-color:

div { background-color: #fff; }

fixes the problem. But, in this case, that's not possible - I need the DIV to ha开发者_开发知识库ve a transparent background.

I've come across this bug in the past, but I cannot for the life of me remember the IE hack to fix it.

Try using a transparent background image.

I would suggest using a 2x2 or bigger .gif that is all transparent pixels. Set it to repeat on x and y and IE shouldn't have an issue with the clicks.

background: transparent url(path/to/spacer.gif) repeat left top;
/* Not all of that is necessary, but I have a tendency to define it anyway. */

Had the same problem and didnt found a better solution than the transparent gif. Note that this problem also occured in IE8 for me. You don't have to use a 2x2 px gif, 1x1 px is enough.