为什么 Internet Explorer 中 Iframe 中的 PDF 的 z-index 失败？

z-index 在 Internet Explorer 中无法读取 iframe 中的 PDF

问题：

z-index 不起作用预期 iframe 在 Internet Explorer 8 中显示 PDF； iframe 出现在任何重叠元素之上。

说明：

Internet Explorer 区分窗口元素和无窗口元素。标准 HTML 元素（例如 div 和 input）是无窗口的，而在 MSHTML 外部呈现的元素（例如，选择元素和 ActiveX 控件）是有窗口的。 iframe 在 IE 5 中是有窗口的，但在 IE 5.5 中变为无窗口。但是，为了向后兼容，iframe 仍会覆盖 z 索引较低的窗口元素。

解决方案：

要解决此问题，请插入另一个所需页面内容和 PDF iframe 之间的 iframe:

代码:

HTML:

<code class="html"><div id="outer">
    <div id="inner">my text that should be on top</div>
    <iframe class="cover" src="about:blank"></iframe>
</div>

<iframe id="pdf" src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"></iframe></code>

CSS：

<code class="css">#outer {
    position: relative;
    left: 150px;
    top: 20px;
    width: 100px;
    z-index: 2;
}

#inner {
    background: red;
}

.cover {
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}

#pdf {
    position: relative;
    z-index: 1;
}</code>

此附加 iframe 充当透明覆盖层，防止 PDF iframe 与其他页面元素重叠。

支持：

此解决方案已经过测试，可在 Internet Explorer 7-9 中运行。为了与其他浏览器兼容，请考虑使用 JavaScript 添加 iframe 或将其包装在仅 IE 的条件注释中：

<code class="html"><!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]--></code>

以上是为什么 Internet Explorer 中 Iframe 中的 PDF 的 z-index 失败？的详细内容。更多信息请关注PHP中文网其他相关文章！