IE 中 iframe 的 Z-index 问题答案

【问题标题】：Z-index issues with iframe in IEIE 中 iframe 的 Z-index 问题
【发布时间】：2014-08-31 19:20:54
【问题描述】：

当它们与 iframe 重叠时，IE 似乎会忽略 z-index 较高的元素。

已阅读其他建议将 &wmode=transparent 组合添加到 iframe src 和 wmode="opaque" 属性到 iframe 本身的组合；虽然 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/

任何帮助将不胜感激。

【问题讨论】：

iframe { z-index: -1; } 在 IE 中有什么作用吗？
@misterManSam ，很遗憾没有。
如果没有应用 z-index 怎么办like in this fiddle。徽章是在 IE 中的 iframe 上方吗？
YouTube Video Embedded via iframe Ignoring z-index?的可能重复

标签： css internet-explorer iframe z-index

【解决方案1】：

你的链接错了，默认链接字应该是embed，

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

【讨论】：

【解决方案2】：

我已更新您的代码。现在在 IE 中工作正常，只需通过添加 wmode 参数 javascript jsfiddle

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

参考This post

【讨论】：

原代码有一些错误，在更新后的代码中得到解决。