在IE浏览器中，iframe的Z-index问题

Question

在IE浏览器中，iframe的Z-index问题

3

当元素与 iframe 重叠时，IE 似乎会忽略具有更高 z-index 的元素。

已经阅读了其他一些帖子，建议在 iframe src 中添加 &wmode=transparent 的组合，以及在 iframe 本身中添加 wmode="opaque" 属性；尽管 IE 似乎都不喜欢这些方法。

<iframe title="YouTube video player" class="media-youtube-html5" type="text/html" width="500" height="300" src="http://www.youtube.com/v/9W82sMSMJJg?hd=1&wmode=transparent" wmode="opaque" frameborder="0"></iframe>

http://jsfiddle.net/7fd8Y/

非常感谢您的帮助。

- Sj.

iframe { z-index: -1; } 在 IE 中有什么作用吗？ - misterManSam

很抱歉，@misterManSam，不行。 - Sj.

如果根本没有应用z-index，会怎么样就像在这个fiddle中。IE中徽章是否覆盖在iframe上？ - misterManSam

可能是重复的问题：通过iframe嵌入的YouTube视频忽略z-index？ - Huangism

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anton Lyhin · Answer 1

你的链接有误，正确的默认链接词应该是嵌入。

<iframe src="http://www.youtube.com/embed/9W82sMSMJJg" frameborder="0"></iframe>

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

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

这里有一个IE的示例： http://jsfiddle.net/7fd8Y/21/

- karan3112 · Answer 2

我已经更新了你的代码。现在在IE中可以正常工作，只是通过JavaScript添加了wmode参数 jsfiddle。

$('iframe').each(function(){
    var url = $(this).attr("src");
    $(this).attr("src",url+"?wmode=transparent");
});

请参考这篇文章