CSS z-index 在 iframe 中使用 pdf 的 Internet Explorer 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12911428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
z-index does not work in Internet Explorer with pdf in iframe
提问by Corinne Kubler
I cannot get z-indexworking on a iframethat contains a pdf file with IE8. It works with Google Chrome.
我不能让z-index一个工作iframe包含与IE8的PDF文件。它适用于谷歌浏览器。
Example (JSFiddle):
示例（JSFiddle）：
HTML
HTML
<div id="div-text">
<div id="shouldBeOnTop">my text that should be on top</div>
</div>
<div id="div-frame">
<iframe src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"/>
</div>
CSS
CSS
#div-text{
position:relative;
left:210px;
top:20px
}
#shouldBeOnTop{
position:relative;
right:60px;
background-color:red;
width:100px;
z-index:2;
}
#div-frame{
position:relative;
z-index:1;
}
回答by Jordan Gray
Update:Matthew Wise has a really clever alternative solutionwhich you should consider—especially if you're having trouble with my approach or dislike ugly hacks!
更新：Matthew Wise 有一个非常聪明的替代解决方案，你应该考虑——特别是如果你对我的方法有问题或不喜欢丑陋的黑客！
There is a way to cover windowed elements in IE with other elements, but you're not going to like it.
有一种方法可以用其他元素覆盖 IE 中的窗口元素，但您不会喜欢它。
Background: windowed and windowless elements
背景：有窗口和无窗口元素
Legacy IE categorises elements into two types: windowed and windowless.
旧版 IE 将元素分为两类：有窗口的和无窗口的。
Regular elements like divand inputare windowless. They are rendered by the browser itself in a single MSHTML plane and respect each other's z-order.
常规元素，如div和input是无窗的。它们由浏览器本身在单个 MSHTML 平面中呈现，并尊重彼此的 z 顺序。
Elements rendered outside of MSHTML are windowed; for example, select(rendered by the OS) and ActiveX controls. They respect each other's z-order, but occupy a separate MSHTML plane that is painted on top of all windowless elements.
在 MSHTML 之外呈现的元素是窗口化的；例如，select（由操作系统呈现）和 ActiveX 控件。它们尊重彼此的 z 顺序，但占据一个单独的 MSHTML 平面，该平面绘制在所有无窗口元素的顶部。
The only exception is iframe. In IE 5, iframewas a windowed element. This was changed in IE 5.5; it is now a windowless element, but for backwards compatibility reasons it will still draw over windowed elements with a lower z-index
唯一的例外是iframe。在 IE 5 中，iframe是一个窗口元素。这在 IE 5.5中有所改变；它现在是一个无窗口元素，但出于向后兼容性的原因，它仍然会绘制具有较低 z-index 的窗口元素
In other words: iframerespects z-index for both windowed and windowless elements. If you position an iframeover a windowed element, any windowless elements positioned over the iframewill be visible!
换句话说：iframe对于窗口元素和无窗口元素都尊重 z-index。如果您将 aniframe放置在有窗口的元素上，则位于 上的任何无窗口元素iframe都将可见！
What this means
这意味着什么
The PDF will always be painted on top of the regular page content—like selectelements were until IE 7. The fix is to position another iframebetween your content and the PDF.
PDF 将始终绘制在常规页面内容之上——就像selectIE 7 之前的元素一样。解决方法是iframe在您的内容和 PDF 之间放置另一个。
Demo
演示
jsFiddle: http://jsfiddle.net/Jordan/gDuCE/
jsFiddle：http: //jsfiddle.net/Jordan/gDuCE/
Code
代码
HTML:
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:
? 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;
}
Support
支持
This has been tested and should work in IE 7–9. If you feel persnickety about it showing up in the DOM for other browsers, you can add it with JavaScript or wrap it in an IE-only conditional comment:
这已经过测试，应该可以在 IE 7-9 中使用。如果您对它在其他浏览器的 DOM 中显示感到挑剔，您可以使用 JavaScript 添加它或将其包装在仅限 IE 的条件注释中：
<!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->
回答by Matthew Wise
The workaround with the additional IFRAME does work in simple cases but I have spent a morning trying to get the overlay to respect transparency. Basically our application has modal popups whereby a full-window overlay behind the popups is rendered 'greyed out' (background colour black, opacity 0.25) to indicate to the user that the pop-ups are modal. With the workaround, the embedded PDF view never gets greyed out with the rest of the window so still looks 'active' and indeed you can still interact with the PDF viewer.
附加 IFRAME 的解决方法在简单情况下确实有效，但我花了一个上午试图让叠加层尊重透明度。基本上我们的应用程序有模态弹出窗口，其中弹出窗口后面的全窗口覆盖呈现“灰色”（背景颜色为黑色，不透明度 0.25）以向用户表明弹出窗口是模态的。通过变通方法，嵌入的 PDF 视图永远不会与窗口的其余部分一起变灰，因此看起来仍然“活跃”，实际上您仍然可以与 PDF 查看器进行交互。
Our solution is to use Mozilla's pdf.js library: https://github.com/mozilla/pdf.js/- embedding an IFRAME pointing at the test URL http://mozilla.github.com/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdfworks straight out of the box respecting z-index, transparency, the lot, no hacks required! Seems that they use their own rendering engine which generates standard HTML representing the content of the PDF.
我们的解决方案是使用 Mozilla 的 pdf.js 库：https: //github.com/mozilla/pdf.js/- 嵌入一个 IFRAME 指向测试 URL http://mozilla.github.com/pdf.js/web/ viewer.html?file=compressed.tracemonkey-pldi-09.pdf开箱即用，尊重 z-index，透明度，很多，不需要黑客！似乎他们使用自己的渲染引擎来生成表示 PDF 内容的标准 HTML。
回答by Vishnu Narang
I Had been trying to fix the same issue and my scenario was similar. I was trying to render a youtube Video on my page and on top of the video i wanted to place some divwith some information.
我一直在尝试解决同样的问题，我的情况也很相似。我试图在我的页面上呈现一个 youtube 视频，并在视频的顶部放置一些div带有一些信息的视频。
But the youtube video being contained into an iframewasn't letting me do that. Irrespective of thez-indexthat i gave to the elements.
但是包含在 youtube 上的视频iframe并没有让我这样做。不管z-index我给元素的是什么。
Then this post helped - https://stackoverflow.com/a/9074366/1484384
然后这篇文章有所帮助 - https://stackoverflow.com/a/9074366/1484384
Basically its about the wmode. Check the above post to see how to work with it.
基本上它是关于wmode. 查看上面的帖子以了解如何使用它。
Here is some code from that post:
这是该帖子中的一些代码：
<iframe title="YouTube video player" width="480" height="390 src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent">
Or
或者
//Fix z-index youtube video embedding
//修复z-index youtube视频嵌入
$(document).ready(function (){
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
});
回答by AnthonyVO
For those who are using jQueryUI, I came up with the following solution.
对于那些使用 jQueryUI 的人，我想出了以下解决方案。
Add the following function and call it from the open event of your dialogs. If your browser is IE it will insert an iFrame into the Modal overlay or else add it to the dialog background.
添加以下函数并从对话框的打开事件中调用它。如果您的浏览器是 IE，它将在模态覆盖中插入一个 iFrame，或者将其添加到对话框背景中。
// Simple IE Detection.
var isIE = Object.hasOwnProperty.call(window, "ActiveXObject");
// Fix IE bug where an iFrame from below will cover a dialogs contents.
function dialogIFrameFix(event /* object */) {
setTimeout(function () {
if (event && event.target && isIE) {
var $dialog = $(event.target.parentElement);
// Get the modal overlay if found.
var $fixTarget = $dialog.next('.ui-widget-overlay');
// Use the dialog body if there is no overlay.
if (!$fixTarget || !$fixTarget.length)
$fixTarget = $dialog;
// Add as first child so it is covered by all of the other elements
$fixTarget.prepend('<iframe class="iFrameFix" src="about:blank" style="position:absolute;top:0;left:0;width:100%;height:100%"></iframe>');
}
}, 10);
}
You would then call it as follows..
然后你会调用它如下..
.dialog({
open: function (event, ui) {
dialogIFrameFix(event);
}
});
