z-index 在 iframe 中使用 pdf 的 Internet Explorer 中不起作用 [英] z-index does not work in Internet Explorer with pdf in iframe

问题描述

我无法让 z-index 在包含 IE8 pdf 文件的 iframe 上工作.它适用于 Google Chrome.

示例(JSFiddle):

HTML

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

CSS

#div-text{位置:相对；左:210像素；顶部:20 像素}#shouldBeOnTop{位置:相对；右:60px；背景颜色:红色；宽度:100px；z-索引:2；}#div-frame{位置:相对；z-索引:1；}

解决方案

更新: MatthewWise 有一个非常聪明的替代解决方案，你应该考虑一下——特别是如果你对我的方法有问题或不喜欢丑陋的黑客！

<小时>

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

背景:窗口和无窗口元素

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

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

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

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

换句话说:iframe 对有窗口和无窗口元素都尊重 z-index.如果您将 iframe 放在窗口元素上，则位于 iframe 上的任何无窗口元素都将可见！

这是什么意思

PDF 将始终绘制在常规页面内容的顶部—像 select 元素直到 IE 7.解决方法是在您的内容和 PDF 之间放置另一个 iframe.

演示

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

代码

HTML:

<div id="inner">我应该在顶部的文本</div><iframe class="cover" src="about:blank"></iframe>
<iframe id="pdf" src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"></iframe>

CSS:

#outer {位置:相对；左:150px；顶部:20px；宽度:100px；z-索引:2；}#内{背景:红色；}.覆盖 {边界:无；位置:绝对；顶部:0；左:0；高度:100%；宽度:100%；z-索引:-1；}#pdf {位置:相对；z-索引:1；}

支持

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

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

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

解决方案

Update: Matthew Wise has a really clever alternative solution which you should consider—especially if you're having trouble with my approach or dislike ugly hacks!

---

There is a way to cover windowed elements in IE with other elements, but you're not going to like it.

Background: windowed and windowless elements

Legacy IE categorises elements into two types: windowed and windowless.

Regular elements like div and input are windowless. They are rendered by the browser itself in a single MSHTML plane and respect each other's z-order.

Elements rendered outside of MSHTML are windowed; for example, select (rendered by the OS) and ActiveX controls. They respect each other's z-order, but occupy a separate MSHTML plane that is painted on top of all windowless elements.

The only exception 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

In other words: iframe respects z-index for both windowed and windowless elements. If you position an iframe over a windowed element, any windowless elements positioned over the iframe will be visible!

What this means

The PDF will always be painted on top of the regular page content—like select elements were until IE 7. The fix is to position another iframe 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 在 iframe 中使用 pdf 的 Internet Explorer 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！