IE中iframe标签显示在DIV之上的问题解决方案

MadPecker 发布于2019-04-23 11:47 / 3333人阅读

摘要：在之外呈现的元素是窗口化的例如，选择由呈现和控件。他们尊重彼此的顺序，但占据一个多带带的平面，该平面绘制在所有无窗元素之上。

在做网页时前端时，使用IE打开时会出现标题栏DIV被遮挡PDF遮挡，

后在stackoverflow中查到是IE浏览器的问题：链接https://stackoverflow.com/questions/12911428/z-index-does-not-work-in-internet-explorer-with-pdf-in-iframe--

以下是翻译：

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

背景：窗口和无窗口元素
旧 IE将元素分为两种类型：windowed和windowless。

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

在MSHTML之外呈现的元素是窗口化的;例如，选择（由OS呈现）和ActiveX控件。他们尊重彼此的z顺序，但占据一个多带带的MSHTML平面，该平面绘制在所有无窗元素之上。

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

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

这意味着什么
PDF将始终绘制在常规页面内容之上，类似于选择元素，直到IE 7.修复是在您的内容和PDF之间定位另一个iframe。

html:

<div id="outer">
    <div id="inner">my text that should be on topdiv>
    <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;
}

利用上述代码加入自己的界面后实现了iframe被div遮盖，但还有不完美的地方，在网页滚动时还是会出现遮盖，但滚动停止后正常。

云服务器 GPU云服务器 RDLC报表在IE10下的问题 div标签中使用js js时间显示在div webrtc在ie中获取ip

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1153.html

HTML/CSS基础知识总结

摘要：控制表单控件的禁用状态。这个符号只有会识别渐进识别的方式，从总体中逐渐排除局部。接着，再次使用将和分离开来，这样已经独立识别。生成相对定位的元素，相对于其正常位置进行定位。元素不能用作语义用途以外的其他目的。 HTML、CSS部分要点：对Web标准的理解、浏览器差异、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端开发技术等 1.Doctype作用? ...

CoderStudy 2019-08-30 12:48 评论0 收藏0
HTML/CSS基础知识总结

摘要：控制表单控件的禁用状态。这个符号只有会识别渐进识别的方式，从总体中逐渐排除局部。接着，再次使用将和分离开来，这样已经独立识别。生成相对定位的元素，相对于其正常位置进行定位。元素不能用作语义用途以外的其他目的。 HTML、CSS部分要点：对Web标准的理解、浏览器差异、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端开发技术等 1.Doctype作用? ...

zhoutao 2019-08-01 15:06 评论0 收藏0
html+css 核心知识总结

摘要：空元素，主要讲下可算内联元素，因为可与其他元素同行，且宽高对其起作用。提示对内联元素宽高起作用，请使用谈谈对定位的理解生成绝对定位的元素，相对于定位以外的第一个父元素进行定位。 Html 1.解释，主要从utf-8展开，utf-8是一种字符编码，该编码是全世界通用的，意思是假如项目涉及多语言，那么只能使用该编码方式。是使用html5文档类型。告知浏览器的解析器，用什么文档类型 ...

jindong 2019-08-29 15:14 评论0 收藏0
html+css 核心知识总结

摘要：空元素，主要讲下可算内联元素，因为可与其他元素同行，且宽高对其起作用。提示对内联元素宽高起作用，请使用谈谈对定位的理解生成绝对定位的元素，相对于定位以外的第一个父元素进行定位。 Html 1.解释，主要从utf-8展开，utf-8是一种字符编码，该编码是全世界通用的，意思是假如项目涉及多语言，那么只能使用该编码方式。是使用html5文档类型。告知浏览器的解析器，用什么文档类型 ...

szysky 2019-08-02 10:19 评论0 收藏0
html&&css

摘要：标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。控制表单控件的禁用状态。首先，巧妙的使用这一标记，将游览器从所有情况中分离出来。 1.Doctype作用？标准模式与兼容模式各有什么区别声明位于位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器,用什么文档标准解析这个文档。DOCTYPE不存在...

gggggggbong 2019-08-29 16:16 评论0 收藏0