為什麼 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中文網其他相關文章！