css – z-index在Internet Explorer中无法在iframe中使用pdf

我不能得到z索引工作在包含与IE8的pdf文件的iframe。它与谷歌Chrome浏览器。

实施例(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;
}

解决方法

我知道一种技术，可靠地封闭窗口控件在IE与其他元素，但你不会喜欢它。

背景：窗口和无窗元素

IE将元素分为两种类型：窗口化和无窗口化。像div和input这样的常规元素是无窗口的，由MSHTML引擎直接呈现。然而，窗口元素在单独的MSHTML平面中呈现，并且被绘制在为它们保留的空间中侵入的任何元素上。他们尊重z-index彼此，但总是在无窗口元素的顶部。

此规则的唯一例外是iframe。在IE 5中，iframe是一个窗口元素。这是changed in IE 5.5;它现在是一个无窗口元素，但是为了向后兼容性原因，它仍然会绘制具有较低z-index的窗口元素。至关重要的是，它也遵循无窗口元素的z-index – 所以如果你在一个窗口元素上放置一个iframe，你在iframe上的任何无窗口元素将是可见的。

这意味着什么

基本上，PDF被绘制在常规页面content-like select elements were until IE 7的顶部。最简单的解决方法是使用位于您的内容和PDF之间的另一个iframe。

演示

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

码

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

支持

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

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