用于阻止可点击事件的 div 覆盖 iframe 在 IE 中不起作用答案

【问题标题】：div overlay for blocking clickable events iframe not working in IE用于阻止可点击事件的 div 覆盖 iframe 在 IE 中不起作用
【发布时间】：2013-09-01 12:47:58
【问题描述】：

我有一个显示网页的 iframe，我需要阻止该网页的所有点击事件。我使用了以下代码

 <div id="IframeWrapper" style="position: relative;">
    <div id="iframeBlocker" style="position: absolute; top: 0; left: 0; width:95%; height:95%;z-index:2"></div>
     <iframe  id="iframewebpage" style="z-index:1"  runat="server"></iframe>
    </div>

这适用于除 IE（8 和 9）之外的所有浏览器。有什么解决方法吗？

【问题讨论】：

我们说的是哪个IE版本？那么添加一个高于 iframe 的 z-index 的 z-index 呢？
它不适用于 8 和 9 版本。我也尝试使用 z-index（请参阅我的编辑）。这也无济于事。
如果是老版本的ie，可能需要将frame blocker的背景设置为50x50的透明gif
@Pete: 不能使用 gif。因为这个 iframe 是可拖动的，而且大小也可以改变。

标签： html css internet-explorer iframe

【解决方案1】：

在包含“position: absolute”的div上，需要添加这些样式：

{
  background-color: white;
  opacity: 0;
}

是的，IE 总是很奇怪。

【讨论】：

【解决方案2】：

我遇到了类似的问题，我设法通过将高度和宽度设置为 div="IframeWrapper" 来解决它，然后它就起作用了！ :-)

/安德烈亚斯

【讨论】：

【解决方案3】：

不知道为什么上面的方法不起作用，理论对我来说都是正确的，但是在设置背景时，它似乎成功地渲染了 div。虽然下面的代码不允许您在 iframe 上使用滚动条，但它应该是一个好的起点。我已经删除了 z-index，因为在 iframe 之后渲染阻止程序意味着它将在其“顶部”渲染。

<div id="IframeWrapper" style="position: relative;">
    <iframe  id="iframewebpage" style="z-index:1"  runat="server" src="http://www.w3schools.com" ></iframe>
    <div id="iframeBlocker" style="position:absolute; top: 0; left: 0; width:95%; height:95%;background-color:aliceblue;opacity:0.1;"></div>
</div>

【讨论】：

但这对 IE 没有帮助 :(