栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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


有一种方法可以用其他元素覆盖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将始终在常规页面内容上绘制,就像

select
IE7之前的元素一样。解决方法是
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]-->


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/575583.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号