css - 如何防止事件通过 IE 中的覆盖元素泄漏？

Question

给定以下 HTML:

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

...和 ​​CSS:

.with-shield {
  position: relative;   
}

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

(Fiddle)。

FireFox 和 Chrome 不允许您单击单选按钮(因为 .shield 位于它的顶部)，但是 IE9(我假设是旧版本)允许(即使开发人员工具显示 .shield 正确就位。

如何更改 CSS 以让 .shield 吸收 IE 中的点击事件(即阻止用户选择 radio )？

我需要这个，因为我要向员工展示客户调查的结果，只需重新显示表单 View 即可；我想添加一个覆盖层以阻止员工意外更改值(我已经禁用了 tabIndex 等)。

Answer 1

甚至晚些时候参加派对，但这就是我所做的:

只需使用 1x1 像素透明 GIF 的 base64 编码作为背景，这将停止所有点击/点击(也在 IE9 和 IE8 上测试)。

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