IE中iframe標(biāo)簽顯示在DIV之上的問(wèn)題解決方案

MadPecker 發(fā)布于2019-04-23 11:47 / 3334人閱讀

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

在做網(wǎng)頁(yè)時(shí)前端時(shí)，使用IE打開(kāi)時(shí)會(huì)出現(xiàn)標(biāo)題欄DIV被遮擋PDF遮擋，

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

以下是翻譯：

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

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

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

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

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

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

這意味著什么
PDF將始終繪制在常規(guī)頁(yè)面內(nèi)容之上，類似于選擇元素，直到IE 7.修復(fù)是在您的內(nèi)容和PDF之間定位另一個(gè)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;
}