z-index在Internet Explorer中无法在iframe中使用pdf [英] z-index does not work in Internet Explorer with pdf in iframe

问题描述

我无法获得 z-index 在包含带有IE8的pdf文件的 iframe 上工作。它适用于Google Chrome。

示例（ JSFiddle ）：

HTML

 < div id =div-text> 
< div id =shouldBeOnTop>我应该在顶部的文字< / div> 
< / div> 
< div id =div-frame> 
< iframe src =http://legallo1.free.fr/french/CV_JLG.pdfwidth =200height =200/> 
< / div> 
  

CSS

< pre class =lang-css prettyprint-override> ＃div-text {
position：relative;
left：210px;
top：20px
}

#shouldBeOnTop {
position：relative;
right：60px;
background-color：red;
width：100px;
z-index：2;
}

＃div-frame {
position：relative;
z-index：1;
}


解决方案

背景：窗口和无窗口的元素

IE将元素分为两种类型：窗口化和无窗口化。 div 和输入的常规元素是无窗口的，由MSHTML引擎直接呈现。然而，窗口元素在单独的MSHTML平面中呈现，并且被绘制在为它们保留的空间中侵入的任何元素上。

这个规则唯一的例外是 iframe 。在IE 5中， iframe 是一个窗口元素。这是在IE 5.5中更改;它现在是一个无窗口元素，但是为了向后兼容性原因，它仍然会绘制具有较低z-index的窗口元素。至关重要的是，它也支持无窗口元素的z-index - 所以如果你在一个窗口元素上放置一个 iframe ，你位于 iframe

这是什么意思

在常规页面内容的顶部 - 喜欢 select 元素直到IE 7 。最简单的解决方法是在您的内容和PDF之间使用另一个 iframe 。

演示

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

代码

HTML：


$ b

 < div id =outer> 
< div id =inner>我应该在顶部的文字< / div> 
< iframe class =coversrc =about：blank>< / iframe> 
< / div> 
 
< iframe id =pdfsrc =http://legallo1.free.fr/french/CV_JLG.pdfwidth =200height =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; 
} 
  

支持

这已经过测试，应该在IE 7-9中工作。如果您对其他浏览器在DOM中显示的效果感到难以置信，您可以使用JavaScript添加它或将其包装在仅限IE的条件注释中：

 < $  -  [if IE]>< iframe class =coversrc =about：blank>< / iframe> 
  

I cannot get z-index working on a iframe that contains a pdf file with IE8. It works with Google Chrome.

Example (JSFiddle):

HTML

<div id="div-text">
      <div id="shouldBeOnTop">my text that should be on top</div>
</div>
<div id="div-frame">
    <iframe src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"/>
</div>

CSS

#div-text{
    position:relative;
    left:210px;
    top:20px
}

#shouldBeOnTop{
    position:relative;
    right:60px;
    background-color:red;
    width:100px;
    z-index:2;
}

#div-frame{
    position:relative;
     z-index:1;
}

解决方案

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:

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

​ 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:

<!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->

这篇关于z-index在Internet Explorer中无法在iframe中使用pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！