title: How to prevent event leaking through an overlaying element in IE?
body: <p>Given the following HTML:</p>
  
  <pre><code>&lt;div class="with-shield"&gt;
      &lt;div class="shield"&gt;&lt;/div&gt;
      &lt;input type="radio"/&gt;
  &lt;/div&gt;
  ​
  </code></pre>
  
  <p>... and CSS:</p>
  
  <pre><code>.with-shield {
    position: relative;   
  }
  
  .shield {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;   
    z-index: 100;
  }
  </code></pre>
  
  <p>(<a href="http://jsfiddle.net/AyHzZ/1" rel="noreferrer">Fiddle</a>).</p>
  
  <p>FireFox and Chrome do no let you click the radio button (as the <code>.shield</code> is positioned over the top of it), however IE9 (and I assume older versions) does (even though developer tools shows <code>.shield</code> is correctly in place).</p>
  
  <p>How can I change the CSS to let <code>.shield</code> absorb click events (i.e. to stop a user being able to select the radio) in IE?​</p>
  
  <p>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 <code>tabIndex</code> etc).</p>