z-index在iframe中使用pdf的Internet Explorer中不起作用

Question

我无法z-index使用iframe包含IE8的pdf文件.它适用于谷歌浏览器.

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

Answer 1

更新: Matthew Wise有一个非常聪明的替代解决方案,您应该考虑 - 特别是如果您遇到我的方法有问题或者不喜欢丑陋的黑客攻击!

有一种方法可以用IE中的其他元素覆盖IE中的窗口元素,但是你不会喜欢它.

背景:窗口和无窗口元素

Legacy IE将元素分为两种类型:windowed和windowless.

像普通的元素div,并input有窗户.它们由浏览器本身在单个MSHTML平面中呈现,并且尊重彼此的z顺序.

在MSHTML之外呈现的元素是窗口化的 ; 例如,select(由OS呈现)和ActiveX控件.他们尊重彼此的z顺序,但占据一个单独的MSHTML平面,该平面绘制在所有无窗元素之上.

唯一的例外是iframe.在IE 5中,iframe是一个窗口元素.这在IE 5.5中有所改变 ; 它现在是一个无窗口元素,但出于向后兼容的原因,它仍然会绘制具有较低z-index的窗口元素

换句话说:iframe尊重窗口和无窗口元素的z-index.如果您将iframe一个窗口元素放置在窗口上,那么任何位于窗口上方的无窗元素iframe都将可见!

这意味着什么

PDF将始终绘制在常规页面内容之上 - 类似select元素直到IE 7.解决方法是iframe在您的内容和PDF之间定位另一个.

演示

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

Answer 2

使用额外的IFRAME的变通办法确实可以在简单的情况下使用，但是我花了一个上午的时间来尝试使覆盖图更加透明。基本上，我们的应用程序具有模式弹出窗口，由此弹出窗口后面的全窗口叠加层将显示为“灰色”（背景色为黑色，不透明度0.25），以向用户指示弹出窗口为模式弹出窗口。通过这种解决方法，嵌入式PDF视图永远不会在窗口的其余部分变灰，因此看起来仍然“处于活动状态”，实际上您仍然可以与PDF查看器进行交互。

我们的解决方案是使用Mozilla的pdf.js库：https : //github.com/mozilla/pdf.js/-嵌入指向测试URL的IFRAME http://mozilla.github.com/pdf.js/web/ viewer.html？file = compressed.tracemonkey-pldi-09.pdf就 z-index，透明度，很多方面而言，都是开箱即用的，不需要黑客！似乎他们使用自己的呈现引擎，该引擎生成代表PDF内容的标准HTML。