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

在做网页时前端时，使用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:

my text that should be on top

CSS:

#outer {

position: relative;

left: 150px;

top: 20px;

width: 100px;

z-index:;

}

#inner {

background: red;

}

.cover {

border: none;

position: absolute;

top:;

left:;

height: 100%;

width: 100%;

z-index: -1;

}

#pdf {

position: relative;

z-index:;

}

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

解决embed标签显示在div上层【转藏】

解决embed标签显示在div上层,非设置z-index 今天给屌炸了爆笑网增加了视频栏目,但是发现在IE8中,顶部浮动导航的div在移动到embed视频上时,总是被embed的flash文件盖住.分 ...

使用UIWebView中html标签显示富文本

使用UIWebView中html标签显示富文本 用UIWebView来渲染文本并期望达到富文本的效果开销很大哦! Work 本人此处直接加载自定义字体"新蒂小丸子体",源码不公开, ...

iframe标签书写导致div不显示

div中iframe高度自适应问题

网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...

css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

angularjs 中的iframe 标签 ng-src 路径

如果直接写路径到iframe标签里的ng-src中会出现报错: 解决方法: 1.ng里面有个属性是专门用来解决跨域问题的 $sce. 用法: $scope.someUrl = $sce.trustAs ...

Struts1.x 中处理乱码及通过标签显示数据

1.通过filter解决乱码问题 网页的请求到达之前,先要经过filter的处理: 提取数据出现乱码:request.setCharacterEncoding("UTF-8"); ...

随机推荐

Centos 7.0 安装Mono 3.4 和 Jexus 5.6

2013-07-26 写过一篇,CentOS 7在CentOS 6的基础上有很大的调整,本文是这篇文章的更新,主要介 ...

通过Trainingkit对Azure有一个初步的了解

学习Azure有一个非常不错的资料库Azure training kit. 这里面包含了很多Azure团队编写的实例代码,以及为初学Azure的开发人员准备的新手教学课程. 开发人员可以从http:/ ...

ajax例子：审核验证用户名；登录界面

审核验证用户名主页面:

用户名:

hdu--(1025)Constructing Roads In JGShining's Kingdom(dp/LIS+二分)

Constructing Roads In JGShining's Kingdom Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65 ...

FB接口之 js调用支付窗口

官方文档: https://developers.facebook.com/docs/reference/dialogs/pay/