成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

MadPecker / 3342人閱讀

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

在做網(wǎng)頁時前端時，使用IE打開時會出現(xiàn)標(biāo)題欄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和輸入這樣的常規(guī)元素是無窗口的。它們由瀏覽器本身在單個MSHTML平面中呈現(xiàn)，并且尊重彼此的z順序。

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

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

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

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

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

?

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1153.html

相關(guān)文章

  • HTML/CSS基礎(chǔ)知識總結(jié)

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

    CoderStudy 評論0 收藏0

  • HTML/CSS基礎(chǔ)知識總結(jié)

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

    zhoutao 評論0 收藏0

  • html+css 核心知識總結(jié)

    摘要：空元素，主要講下可算內(nèi)聯(lián)元素，因為可與其他元素同行，且寬高對其起作用。提示對內(nèi)聯(lián)元素寬高起作用，請使用談?wù)剬Χㄎ坏睦斫馍山^對定位的元素，相對于定位以外的第一個父元素進(jìn)行定位。 Html 1.解釋 ，主要從utf-8展開，utf-8是一種字符編碼，該編碼是全世界通用的，意思是假如項目涉及多語言，那么只能使用該編碼方式。 是使用html5文檔類型。告知瀏覽器的解析器，用什么文檔類型 ...

    jindong 評論0 收藏0

  • html+css 核心知識總結(jié)

    摘要：空元素，主要講下可算內(nèi)聯(lián)元素，因為可與其他元素同行，且寬高對其起作用。提示對內(nèi)聯(lián)元素寬高起作用，請使用談?wù)剬Χㄎ坏睦斫馍山^對定位的元素，相對于定位以外的第一個父元素進(jìn)行定位。 Html 1.解釋 ，主要從utf-8展開，utf-8是一種字符編碼，該編碼是全世界通用的，意思是假如項目涉及多語言，那么只能使用該編碼方式。 是使用html5文檔類型。告知瀏覽器的解析器，用什么文檔類型 ...

    szysky 評論0 收藏0

  • html&&css

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

    gggggggbong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<