有一种方法可以用其他元素覆盖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 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 src="about:blank"></iframe><![endif]-->



