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

Question

我无法在包含 IE8 pdf 文件的 iframe 上运行 z-index。它适用于谷歌浏览器。

示例(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 has a really clever alternative solution你应该考虑这一点——尤其是当你对我的方法有困难或不喜欢丑陋的 hack 时!

---

有一种方法可以用其他元素覆盖 IE 中的窗口元素，但您不会喜欢它。

背景:有窗口和无窗口元素

旧版 IE 将元素分为两种类型:有窗口的和无窗口的。

div 和 input 等常规元素无窗口。它们由浏览器本身在单个 MSHTML 平面中呈现，并尊重彼此的 z 顺序。

在 MSHTML 之外呈现的元素是窗口化的；例如，select(由操作系统呈现)和 ActiveX 控件。它们尊重彼此的 z 顺序，但占据一个单独的 MSHTML 平面，该平面绘制在所有无窗口元素之上。

唯一的异常(exception)是 iframe。在 IE 5 中，iframe 是一个窗口元素。这是 changed in IE 5.5 ;它现在是一个无窗口元素，但出于向后兼容性的原因，它仍然会绘制具有较低 z-index 的窗口元素

换句话说:iframe 对有窗口和无窗口元素都遵守 z-index。如果将 iframe 放置在有窗口的元素上，则放置在 iframe 上的任何无窗口元素都将可见!

这是什么意思

PDF 将始终绘制在常规页面内容之上— 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]-->