Question

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

（目前使用IE9进行测试）

Answer 1

尝试使用Youtubes iframe嵌入方法（如果那不是你已经在做的那样，并添加：？wmode = url透明（如果不是第一个url变量，则替换？＆amp;）

Answer 2

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

当iframe的内容是flash嵌入对象时，真正的问题就来了。在这种情况下，如果flash对象的wmode参数设置为“transparent”或“opaque”，则flash对象只能位于z位置，但如果使用wmode =“window”将flash包含在HTML文档中，则flash对象将无效。 / p>

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

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

已设定。

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

Answer 3

我看到了类似的问题，默认的youtube链接字应为嵌入，

<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/

Answer 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);
};

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

4 个答案: