2

我遇到了一个奇怪的问题，似乎找不到解决方案。当嵌入 Youtube 视频时，使用 JqueryTools 选项卡小部件或 JqueryUI 选项卡小部件，它会不断将其覆盖在每个选项卡上。这只发生在 IE 中，专门用 IE10 测试过。有谁知道为什么？

我创建了一个 jsfiddle 来更好地说明这个问题：http: //jsfiddle.net/ncfbX/19/

编辑：

在不包含一些代码的情况下不会让我提交它，所以：

HTML:

<div class="main">
    <div class="slides">Slides division</div>

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">tab1</a></li>
            <li><a href="#tabs-2">tab2</a></li>
            <li><a href="#tabs-3">tab3</a></li>            
        </ul>
        <div id="tabs-1">
            <div class="inner_panel">
                <p>working</p>
<iframe width="531" height="270" src="http://www.youtube.com/embed/7_nyhwuEX2c?rel=0" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
        <div id="tabs-2">
             <div class="inner_panel">
                 <p>Tab2 should not have a youtube video embedded.</p>     
            </div>
        </div>
        <div id="tabs-3">
             <div class="inner_panel">
                 <p>Tab3 should not have a youtube video embedded.</p>                 
            </div>
        </div>
    </div>
</div>

CSS：

.inner_panel{height:350px;}

JAVASCRIPT：

$(document).ready(function(){
   $('#tabs').tabs();
});
4

1 回答 1

5

好吧，我找到了一个修复，显然它与 Youtube 不尊重动态分配的 z-index 有关。

在标签下嵌入 Youtube 视频时使用以下代码，以使其与 IE10 一起正常工作：

<iframe title="YouTube video player" width="480" height="390" src="[YOUR_YOUTUBE_URL_HERE]?wmode=transparent" frameborder="0" wmode="Opaque">

?wmode=transparent at the end of the URL and wmode="Opaque" as an extra parameter is what makes it work.

于 2013-01-20T06:51:36.313 回答