title: div overlap in IE 11 blocks events
body: <p>When I have overlapping divs in IE 11, the 1st div with a radio button in it is blocked from receiving any mouse events by the 2nd overlapping div, so I cannot click on the radio buttons! See simplified example of the code I'm using:</p>
  
  <pre><code>&lt;div&gt;
  &lt;div style="display: block; border: solid 1px blue;"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input id="rbl_0" type="radio" checked="checked"&gt;&lt;label for="rbl_0"&gt;Option 1&lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input id="rbl_1" type="radio"&gt;&lt;label for="rbl_1"&gt;Option 2&lt;/label&gt;&lt;/td&gt;
           &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div style="margin-top: -23px; display: inline-block; border: solid 1px red;"&gt;                  
      &lt;table style="width: 100%; table-layout: fixed;"&gt;
          &lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Product 1&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Product 2&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And in JSFiddle: <a href="http://jsfiddle.net/yW6kp/1/" rel="nofollow">http://jsfiddle.net/yW6kp/1/</a>.</p>
  
  <p>I need these to overlap, but also need the events on the radiobutton to happen as well.  I can achieve this by using display: block on the second div instead of display: inline-block, but then they do not overlap.  This does not happen in IE 10 or in IE 11 compatibility mode.  Can anyone explain what's up</p>