更新: Matthew Wise 有一个非常聪明的替代解决方案,您应该考虑它——尤其是如果您对我的方法有疑问或不喜欢丑陋的黑客攻击!
有一种方法可以用其他元素覆盖 IE 中的窗口元素,但您不会喜欢它。
背景:有窗口和无窗口元素
旧版 IE 将元素分为两种类型:有窗口的和无窗口的。
常规元素喜欢div
和input
是无窗的。它们由浏览器本身在单个 MSHTML 平面中呈现,并尊重彼此的 z 顺序。
在 MSHTML 之外呈现的元素是窗口化的;例如,select
(由操作系统呈现)和 ActiveX 控件。它们尊重彼此的 z 顺序,但占用一个单独的 MSHTML 平面,该平面绘制在所有无窗口元素的顶部。
唯一的例外是iframe
。在 IE 5 中,iframe
是一个窗口元素。这在 IE 5.5 中有所改变;它现在是一个无窗口元素,但出于向后兼容性的原因,它仍会在具有较低 z-index 的窗口元素上绘制
换句话说:iframe
尊重有窗和无窗元素的 z-index。如果您将 aiframe
放置在窗口元素上,则任何放置在 上的无窗口元素iframe
都将可见!
这意味着什么
PDF 将始终绘制在常规页面内容之上—<a href="http://blogs.msdn.com/b/ie/archive/2006/01/17/for-the-select-few.aspx " rel="noreferrer">类似select
元素直到 IE 7。修复方法是iframe
在您的内容和 PDF 之间放置另一个元素。
演示
jsFiddle:http: //jsfiddle.net/Jordan/gDuCE/
代码
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;
}
支持
这已经过测试,应该可以在 IE 7-9 中使用。如果您对它在其他浏览器的 DOM 中显示感到挑剔,您可以使用 JavaScript 添加它或将其包装在仅限 IE 的条件注释中:
<!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->