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

小编典典

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

css

我无法z-index处理iframe包含IE8 pdf文件的。它可以与谷歌浏览器一起使用。

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

阅读 318

2020-05-16

共1个答案

小编典典

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

背景：开窗和无窗元素

旧版IE将元素分为两种类型：窗口化和无窗口化。

像普通的元素div，并input有窗户。它们由浏览器本身在单个MSHTML平面中呈现，并且相互尊重z轴的顺序。

在MSHTML外部呈现的元素带有窗口;例如select（由OS渲染）和ActiveX控件。它们相互尊重彼此的z顺序，但是占据了一个单独的MSHTML平面，该平面绘制在所有无窗口元素的顶部。

唯一的例外是iframe。在IE 5中，iframe是一个窗口元素。IE5.5中对此进行了更改；现在它是一个没有窗口的元素，但是出于向后兼容的原因，它仍将覆盖具有较低z-index的窗口元素

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

这是什么意思

PDF将始终在常规页面内容上绘制，就像selectIE7之前的元素一样。解决方法是iframe在您的内容和PDF之间放置另一个。

码

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

支持

这已经过测试，应该可以在IE7–9中使用。如果您对在其他浏览器的DOM中显示它感到不安，则可以使用JavaScript添加它或将其包装在仅IE的条件注释中：

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

2020-05-16