How to prevent event leaking through an overlaying element in IE?

Question

Given the following HTML:

<div class="with-shield">
    <div class="shield"></div>
    <input type="radio"/>
</div>
​

... and CSS:

.with-shield {
  position: relative;   
}

.shield {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;   
  z-index: 100;
}

(Fiddle).

FireFox and Chrome do no let you click the radio button (as the .shield is positioned over the top of it), however IE9 (and I assume older versions) does (even though developer tools shows .shield is correctly in place).

How can I change the CSS to let .shield absorb click events (i.e. to stop a user being able to select the radio) in IE?​

I need this as I'm presenting the results of a customer survey to employees, simply by redisplaying the form view; I want to add an overlay to stop the employees changing values accidentally (I've already disabled tabIndex etc).

Answer 1

And even later to the party, but this is what I did:

Just use a base64 encode of a 1x1 pixel transparent GIF as background, this stops all the clicks / taps (also tested on IE9 and IE8).

background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);

Answer 2

Just had the same problem recently. Muthu Kumaran's is great, except that it did not account IE < 8. Here is how you can do it:

.with-shield {
  position: relative;   
}

.shield {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;   
  z-index: 100;

background-color:#fff;
opacity:0;
filter: alpha(opacity = 001);

}

Unfortunately neither jsfiddle nor jsbin are running properly on IE8 so I can show you, but I created a test page in my local machine and tested and it works as expected.