IE中iframe標簽顯示在DIV之上的問題解決方案

MadPecker 發布于2019-04-23 11:47 / 3339人閱讀

摘要：在之外呈現的元素是窗口化的例如，選擇由呈現和控件。他們尊重彼此的順序，但占據一個多帶帶的平面，該平面繪制在所有無窗元素之上。

在做網頁時前端時，使用IE打開時會出現標題欄DIV被遮擋PDF遮擋，

?后在stackoverflow中查到是IE瀏覽器的問題：鏈接https://stackoverflow.com/questions/12911428/z-index-does-not-work-in-internet-explorer-with-pdf-in-iframe--

以下是翻譯：

有一種方法可以用IE中的其他元素覆蓋IE中的窗口元素，但是你不會喜歡它。

背景：窗口和無窗口元素
舊 IE將元素分為兩種類型：windowed和windowless。

像div和輸入這樣的常規元素是無窗口的。它們由瀏覽器本身在單個MSHTML平面中呈現，并且尊重彼此的z順序。

在MSHTML之外呈現的元素是窗口化的;例如，選擇（由OS呈現）和ActiveX控件。他們尊重彼此的z順序，但占據一個多帶帶的MSHTML平面，該平面繪制在所有無窗元素之上。

唯一的例外是iframe。在IE 5中，iframe是一個窗口元素。這在IE 5.5中有所改變;它現在是一個無窗口元素，但出于向后兼容的原因，它仍然會繪制具有較低z-index的窗口元素

換句話說：iframe尊重窗口和無窗口元素的z-index。如果您將iframe放置在窗口元素上，則可以看到位于iframe上方的任何無窗口元素！

這意味著什么
PDF將始終繪制在常規頁面內容之上，類似于選擇元素，直到IE 7.修復是在您的內容和PDF之間定位另一個iframe。

html:

<div id="outer">
    <div id="inner">my text that should be on topdiv>
    <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>

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;
}

利用上述代碼加入自己的界面后實現了iframe被div遮蓋，但還有不完美的地方，在網頁滾動時還是會出現遮蓋，但滾動停止后正常。

云服務器 GPU云服務器 RDLC報表在IE10下的問題 div標簽中使用js js時間顯示在div webrtc在ie中獲取ip

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1153.html

HTML/CSS基礎知識總結

摘要：控制表單控件的禁用狀態。這個符號只有會識別漸進識別的方式，從總體中逐漸排除局部。接著，再次使用將和分離開來，這樣已經獨立識別。生成相對定位的元素，相對于其正常位置進行定位。元素不能用作語義用途以外的其他目的。 HTML、CSS部分要點：對Web標準的理解、瀏覽器差異、CSS基本功：布局、盒子模型、選擇器優先級及使用、HTML5、CSS3、移動端開發技術等 1.Doctype作用? ...

CoderStudy 2019-08-30 12:48 評論0 收藏0
HTML/CSS基礎知識總結

摘要：控制表單控件的禁用狀態。這個符號只有會識別漸進識別的方式，從總體中逐漸排除局部。接著，再次使用將和分離開來，這樣已經獨立識別。生成相對定位的元素，相對于其正常位置進行定位。元素不能用作語義用途以外的其他目的。 HTML、CSS部分要點：對Web標準的理解、瀏覽器差異、CSS基本功：布局、盒子模型、選擇器優先級及使用、HTML5、CSS3、移動端開發技術等 1.Doctype作用? ...

zhoutao 2019-08-01 15:06 評論0 收藏0
html+css 核心知識總結

摘要：空元素，主要講下可算內聯元素，因為可與其他元素同行，且寬高對其起作用。提示對內聯元素寬高起作用，請使用談談對定位的理解生成絕對定位的元素，相對于定位以外的第一個父元素進行定位。 Html 1.解釋，主要從utf-8展開，utf-8是一種字符編碼，該編碼是全世界通用的，意思是假如項目涉及多語言，那么只能使用該編碼方式。是使用html5文檔類型。告知瀏覽器的解析器，用什么文檔類型 ...

jindong 2019-08-29 15:14 評論0 收藏0
html+css 核心知識總結

摘要：空元素，主要講下可算內聯元素，因為可與其他元素同行，且寬高對其起作用。提示對內聯元素寬高起作用，請使用談談對定位的理解生成絕對定位的元素，相對于定位以外的第一個父元素進行定位。 Html 1.解釋，主要從utf-8展開，utf-8是一種字符編碼，該編碼是全世界通用的，意思是假如項目涉及多語言，那么只能使用該編碼方式。是使用html5文檔類型。告知瀏覽器的解析器，用什么文檔類型 ...

szysky 2019-08-02 10:19 評論0 收藏0
html&&css

摘要：標準模式的排版和運作模式都是以該瀏覽器支持的最高標準運行。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。控制表單控件的禁用狀態。首先，巧妙的使用這一標記，將游覽器從所有情況中分離出來。 1.Doctype作用？標準模式與兼容模式各有什么區別聲明位于位于HTML文檔中的第一行，處于?標簽之前。告知瀏覽器的解析器,用什么文檔標準解析這個文檔。DOCTYPE不存在...

gggggggbong 2019-08-29 16:16 評論0 收藏0