给定以下 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
等)。
最佳答案
甚至晚些时候参加派对,但这就是我所做的:
只需使用 1x1 像素透明 GIF 的 base64 编码作为背景,这将停止所有点击/点击(也在 IE9 和 IE8 上测试)。
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
关于css - 如何防止事件通过 IE 中的覆盖元素泄漏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11055039/