为什么 z-index 不能在 Internet Explorer 中的 iFrame 中处理 PDF？

z-index 不适用于 IE 中的 iFrame 中的 PDF

在 Internet Explorer (IE) 中，尝试使用 z-包含 PDF 的 iFrame 上的索引可能会导致意外行为。尽管在 Chrome 等其他浏览器中可以无缝工作，但 IE 用户还是遇到了困难。

要理解这个问题，我们需要深入研究 IE 中“窗口”和“无窗口”元素的概念。窗口元素（例如 ActiveX 控件和选择下拉列表）在浏览器的主 MSHTML 平面之外呈现。相比之下，无窗口元素（如 div 和输入字段）在此平面内渲染。

窗口与无窗口元素交互

至关重要的是，窗口元素始终优先于无窗口元素，无论 z 索引如何。这就是包含 PDF 的 iFrame 出现问题的地方。在 IE 中，PDF 被视为窗口元素，这意味着它们将始终出现在无窗口元素的顶部，即使后者具有更高的 z-index。

解决方案：使用另一个 iFrame 进行修复

不幸的是，这个问题没有直接的解决办法。但是，可以通过在 PDF 和页面内容之间引入另一个 iFrame 来实现解决方法。此“覆盖”iFrame 具有负 z 索引，确保其在视图中保持隐藏状态。通过阻止 PDF 的溢出，它允许正常的 z-index 行为应用于主页内容，从而允许文本或其他元素出现在 PDF 顶部。

实现详细信息

以下代码概述了解决方案：

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>

结论

通过利用另一个具有负 z 索引的 iFrame，我们有效地在 PDF 和页面内容之间创建了屏障。此解决方法允许预期的 z-index 行为，使文本或其他元素显示在 IE 中的 PDF 顶部。虽然这个解决方案并不理想，但它提供了一种解决 IE 中 z-index 问题的方法。

以上是为什么 z-index 不能在 Internet Explorer 中的 iFrame 中处理 PDF？的详细内容。更多信息请关注PHP中文网其他相关文章！