如何让 iframe 尊重 IE 中的 z-index？答案

【问题标题】：How can I make iframe respect z-index in IE?如何让 iframe 尊重 IE 中的 z-index？
【发布时间】：2011-11-26 12:26:08
【问题描述】：

我的网站中有一个 youtube iframe 元素，但它位于我的菜单项旁边。当我将鼠标悬停在菜单项上时，会打开一个部分覆盖 iframe 的子菜单（因为它的位置，这显然不是它的特定功能）。这在 Firefox 中运行良好，但像往常一样，它在 IE 中没有，这里 iframe 覆盖了菜单，使其基本上不可读。是否有我需要添加到 iframe 以使其工作的选项，还是根本不可能？

（目前用IE9测试）

【问题讨论】：

尝试使用youtube.com/embed/video_id 链接但不是youtube.com/v/video_id，这是我的问题。应该使用嵌入，而不是 V。

标签： css internet-explorer iframe

【解决方案1】：

尝试使用 Youtubes iframe 嵌入方法（如果这不是您已经在做的，并添加： ?wmode=对 url 透明（如果不是第一个 url 变量，用 & 替换 ?）

【讨论】：

仅供参考，iframe（或包含它的 div）需要明确的 z-index 才能工作。

【解决方案2】：

这个问题有几个问题。首先，在 IE 中使用 z-index 在文档中的其他内容上方或下方设置 iframe 是没有问题的。就 iframe 的定位而言，较高的 z-index 会使您的 iframe 高于其他元素（像往常一样）：相对、绝对或固定。

当您的 iframe 的内容是 Flash 嵌入对象时，真正的问题就出现了。在这种情况下，flash 对象只能在 wmode 参数设置为“透明”或“不透明”的情况下进行 z 定位，但如果使用 wmode = “window”将 Flash 包含在 HTML 文档中，则它将不起作用。

因此，如果您包含外部资源（在您无权访问的网站中，例如 youtube），则只有使用其中任何一种模式才能实现。如果您在 iframe 中加载 Flash 对象，您可以在其中修改其内容，只需检查：

<param name="wmode" value="transparent" />

已设置。

如果 youtube 使用“窗口”模式，您可以随时使用自己的 flash 播放器并动态挂钩 youtube 视频，将您的 flash 对象模式设置为透明。

【讨论】：

你能帮我解答一下 iframe 里面有 pdf 吗（我正在使用 Foxit Reader）:(

【解决方案3】：

我看到了类似的问题，默认的youtube链接词应该是embed，

<iframe src="http://www.youtube.com/embed/video_id"></iframe>

但不仅仅是 v-link（v-link 忽略 z-index）：

<iframe src="http://www.youtube.com/v/video_id" frameborder="0"></iframe>

以下是 IE 的示例：http://jsfiddle.net/7fd8Y/21/

【讨论】：

【解决方案4】：

这里是一个非纯JS的解决方案，替代JQuery：

var iFramesOnPage = document.getElementsByTagName("IFRAME");
for(var i = 0; i < iFramesOnPage.length; i++) { 
    var newiFrameURL = iFramesOnPage[i].getAttribute("src")+"?wmode=transparent"; 
    iFramesOnPage[i].setAttribute("src", newiFrameURL);
};

【讨论】：