Internet Explorer 上 iframe 和白色边框上的 Div答案

【问题标题】：Div over iframe and white border on internet explorerInternet Explorer 上 iframe 和白色边框上的 Div
【发布时间】：2014-10-04 05:29:52
【问题描述】：

我正在尝试在带有 youtube 视频的 iframe 上放置一个 div。一切都在 chrome、firefox 和 opera 中按预期工作，但在 Internet Explorer 中却不行。在 IE 中，div 位于视频后面，视频中出现白色边框。

这是image的问题

我使用的代码是这样的：

HTML：

<!DOCTYPE html>
<html>
    <head> 
//css code 
     <style> 

    html, body{
        margin:0;
        padding:0;
    }

    .mainDiv{
        background-color:blue;
        height:350px;
        width:350px;
    }

    .video{
        position:absolute;
        width:200px;
        height:200px;
    }

    .front {
        position:absolute;
        width:100px;
        height:100px;
        left:120px;
        top:120px;
        background:#f00;
    }
  </style>
</head> 
<body>
    <div class="mainDiv">
        <iframe class="video" src="http://www.youtube.com/v/sItFnGYjhbY?modestbranding=1&version=3&autoplay=1&controls=0&disablekb=1&loop=1&showinfo=0&iv_load_policy=3&playlist=sItFnGYjhbY&wmode=transparent" frameborder="0">
            <p>Your browser does not support iframes.</p>
        </iframe>
        <div class="front"></div>
    </div>
</body> 
</html>

我尝试了各种我找到的解决方案，但任何人都可以。有什么解决办法吗？

谢谢

【问题讨论】：

我也发现了我犯的错误。我不使用视频链接中的嵌入链接。这解决了白色边框的问题。我使用 ...tube.com/v/sItFnGYjhbY 我必须使用 ....ube.com/embed/HgkbCm5K45I

标签： html internet-explorer iframe

【解决方案1】：

在IE中，插件是窗口元素。除了其他窗口元素之外，不可能在窗口元素前面渲染任何东西。

解决方案：也将div.front 放入iframe，使用z-index 订购。

More information

【讨论】：

谢谢，它有效！关于视频帧上的白色边框的任何解决方案？

【解决方案2】：

尝试设置z-index 告诉它堆叠的顺序：

.video{
    position:absolute;
    width:200px;
    height:200px;
    z-index:1;
}

.front {
    position:absolute;
    width:100px;
    height:100px;
    left:120px;
    top:120px;
    background:#f00;
    z-index:2;
}

More information about z-index

【讨论】：