6

给定以下 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;
}

（小提琴）。

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

如何更改 CSS 以.shield吸收 IE 中的点击事件（即阻止用户选择收音机）？</p>

当我向员工展示客户调查的结果时，我需要这个，只需重新显示表单视图即可；我想添加一个覆盖来阻止员工意外更改值（我已经禁用tabIndex等）。

4

3 回答 3

14

甚至后来到聚会上，但这就是我所做的：

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

background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
于 2013-11-06T12:44:36.443 回答
2

最近刚遇到同样的问题。Muthu Kumaran 很棒，只是它没有考虑 IE < 8。这是你可以做到的：

.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);

}

不幸的是，jsfiddle 和 jsbin 都没有在 IE8 上正常运行，所以我可以向您展示，但是我在本地机器上创建了一个测试页面并进行了测试，它可以按预期工作。

于 2013-04-04T19:42:36.737 回答
1

有点晚了，但做这样的事情：

#BlockAction{bottom: 0; left: 0; position: absolute; top: 0; right:0; z-index: -1;}  
#BlockAction.Blocked{z-index: 1000; cursor:wait;background-color:#fff;opacity:0}

背景颜色和不透明度将迎合 IE9 允许透明背景点击通过。其他浏览器在没有它的情况下捕捉到点击。

于 2012-11-09T10:34:13.460 回答