Internet ExplorerのZインデックス

Question

私はこの側の小さなJavaScriptを書きました：http://www.tx-customers.com/ep-immobilien/?page_id=183。

ここでInternet Explorerでレイヤーに問題が発生するため、ホバー機能が正しく機能しません。特定の画像に関連する画像の上にリストアイテムがあり、この画像のクラスを変更して表示します。これは動作しますが、1つの画像をクリックするかSliderがアクティブになると（3秒後）、li項目は表示された画像の背後にあります。 FF、Opera、Safari、Chromeで動作します。 私はz-indexを検索しました。回避策は位置とz-インデックスを設定しようとしましたが、何も変わりませんでした。

HTMLの構造は次のとおりです。

<div id="team"> 
    <div class="images"> 
     <img id="1-team-member-picture" class="team-member" src="img-src" rel="185"> 
     <li class="splitter" rel="1"></li> 
     <img id="2-team-member-picture" class="team-member" src="img-src" rel="185"> 
     <li class="splitter" rel="2"></li> 
     <div id="results"> 
      <p class="res"></p> 
     </div> 
     <p class="clear"></p> 
    </div> 
</div> 

CSSコード：IE用

#team .images { 
    float: left; 
    background: url(images/gesamt_962px.png) no-repeat; 
    position: relative; 
    height: 382px; 
    width: 769px; 
    z-index: 5; 
    padding-left: 64px; 
} 

#team .images img { 
    height: 382px; 
    position: relative; 
    z-index: 4; 
} 

#team .images .team-member { 
    position: absolute; 
    display: none; 
    left: 32px; 
} 

#team .images .current, #team .images .clicked { 
    display: inline; 
} 

#team .images li { 
    width: 30px; 
    height: 382px; 
    float: left; 
    position: relative; 
    z-index: 20; 
    list-style-type: none; 
} 

CSSコード（TRY）：

#mainwrap { 
    font: 14px/20px Times New Roman, Times, sans-serif; 
} 

#team { 
    width: 800px; 
    margin: 0 auto; 
    position: relative; 
    z-index: 20; 
} 

#team .images { 
    margin: 0 auto; 
    background: url(images/gesamt_962px.png) no-repeat; 
    position: relative; 
    height: 382px; 
    width: 769px; 
    padding-left: 64px; 
    z-index: 10; 
} 

#team .images .team-member { 
    position: absolute; 
    display: none; 
    left: 32px; 
    z-index: 0 !important; 
} 

#team .images .current, #team .images .clicked { 
    position: absolue; 
    display: inline; 
    z-index: 0 !important; 
} 

#team .images li { 
    width: 30px; 
    height: 382px; 
    float: left; 
    list-style-type: none; 
    position: relative; 
    z-index: 1 !important; 
} 

そして、これはスクリプトです： http://www.tx-customers.com/ep-immobilien/wp-content/themes/epi/js/teamSlider.js

JSで私の最初の試みですので、いくつかのばかげたコーディングのために私を責めないでください！ ：P

ホバーが使用されているJSの一部。

jQuery($splitter).mouseover(function() { 
    if(!$clicked) stopAnimate(); 
    slideRemoveClass("current"); 
    $('#' + $(this).attr('rel') + '-team-member-picture').addClass("current"); 
}); 

jQuery($splitter).mouseleave(function() { 
    if(!$clicked) animate(); 
    slideRemoveClass("current"); 
    $('#' + $(this).attr('rel') + '-team-member-picture').removeClass("current"); 
}); 

function animate() { 
    clearTimeout(interval); 
    interval = setTimeout(slide, $delay); 
} 

function stopAnimate() { 
    clearTimeout(interval); 
} 

Answer 1

Z-索引付けは、IEでより適切な単語がないために奇妙です。

長いストーリーを短くするために、IEでz-インデックスを正しく使用するには、関連するすべての要素（親から子へ）がZ-インデックス（時にはボディに戻る）を持たなければなりません。 IE7 Z-Index Layering Issues