z-index does not work in Internet Explorer with pd

suemi 發布于2019-08-01 15:52 / 822人閱讀

I know of one technique to reliably occlude windowed controls in IE with other elements, but you"re not going to like it.

Background: windowed and windowless elements

IE categorises elements into two types: windowed and windowless. Regular elements like div and input are windowless, rendered directly by the MSHTML engine. Windowed elements, however, are rendered in a separate MSHTML plane and get painted over any elements intruding in the space reserved for them. They respect z-index for each other, but always paint on top of windowless elements.

The only exception to this rule is iframe. In IE 5, iframe was a windowed element. This was changed in IE 5.5; it is now a windowless element, but for backwards compatibility reasons it will still draw over windowed elements with a lower z-index. Crucially, it also respects z-index for windowless elements—so if you position an iframe over a windowed element, any windowless elements you position over the iframe will be visible.

What this means

Essentially, the PDF is painted on top of the regular page content—like select elements were until IE 7. The easiest fix is to use another iframe positioned between your content and the PDF.

Demo

jsFiddle: http://jsfiddle.net/Jordan/gDuCE

Code

HTML:


    my text that should be on top

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

Support

This has been tested and should work in IE 7–9. If you feel persnickety about it showing up in the DOM for other browsers, you can add it with JavaScript or wrap it in an IE-only conditional comment:

GPU云服務器云服務器 internet?explorer internet-explorer internet-explorer-9 internet-explorer-6

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

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

z-index does not work in Internet Explorer with pd

I know of one technique to reliably occlude windowed controls in IE with other elements, but youre not going to like it. Background: windowed and windowless elements IE categorises elements into two t...

bladefury 2019-08-29 11:27 評論0 收藏0
IE中iframe標簽顯示在DIV之上的問題解決方案

摘要：在之外呈現的元素是窗口化的例如，選擇由呈現和控件。他們尊重彼此的順序，但占據一個單獨的平面，該平面繪制在所有無窗元素之上。在做網頁時前端時，使用IE打開時會出現標題欄DIV被遮擋PDF遮擋， ?后在stackoverflow中查到是IE瀏覽器的問題：鏈接https://stackoverflow.com/questions/12911428/z-index-does-not-work-in...

MadPecker 2019-04-23 11:47 評論0 收藏0
前端基礎知識之HTML

摘要：是文件的第一行代碼，意味著它的前面有注釋都不行。所以要要寫在標簽前面，而且它不屬于標簽。為了兼容以前的網站，所以產生了，瀏覽器會按照標準以前的簡析方式去工作。但是他們在過期時間上有區別 [1: What does a doctype do?] 1: doctype是html文件的第一行代碼，意味著它的前面有注釋都不行。所以要要寫在標簽前面，而且它不屬于html標簽。 2: doctyp...

cfanr 2019-08-01 17:49 評論0 收藏0
Pythonic “Data Science” Specialization

摘要：溫習統計學的知識為更深層次的學習做準備在的演講中說就是我們理解但不知道另外的是如何的我在臺下想對于那可以理解的我好像都只懂了參考標準高效的流程課程用的是我不想再學一門類似的語言了我會找出相對應的和的來源流程什么是干凈的一個變 Why The Data Science Specialization 溫習統計學的知識, 為更深層次的學習做準備 Andrew Ng 在 2015 GTC ...

jasperyang 2019-07-24 17:58 評論0 收藏0
Bootstrap 之 Metronic 模板的學習之路 - （4）源碼分析之腳本部分

摘要：修復后得到合法的后在由布局引擎建立相應的對象。在標簽放置于標簽之后時，源碼被所有瀏覽器泛指上常見的修復為正常形式，即。上一篇之模板的學習之路源碼分析之部分下一篇之模板的學習之路主題布局配置上篇我們將 body 標簽主體部分進行了簡單總覽，下面看看最后的腳本部門。頁面結尾部分（Javascripts 腳本文件）我們來看看代碼最后的代碼，摘取如下： ...

piglei 2019-08-20 10:30 評論0 收藏0