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

ジャバスクリプト:

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

1 に答える 1

5

どうやら、動的に割り当てられた z-index を尊重しない Youtube と関係があるようです。

IE10 で正しく動作するようにするには、YouTube ビデオをタブの下に埋め込むときに次のコードを使用します。

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

URL の末尾にある?wmode=transparentと追加のパラメーターとしてのwmode="Opaque"が機能します。

于 2013-01-20T06:51:36.313 に答える