水平スクロール可能なdiv内のjQueryサイクル：IEの問題

Question

IE 6および7で、水平スクロール可能divに埋め込まれたサイクルスライドショーで問題が発生しました。私はこのテクニック（http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div）を使って水平スクロール可能divを作成しました。スクロール可能なdivにCycleスライドショーを埋め込みます。すべてFF3、Opera、Chromeで正常に動作します。 IE 6と7では、画像のコンテナとナビゲーションサムネイルは固定されていて、スクロールしません。スクロール可能なdiv内の他のdivや要素は正常に動作します。

これは私のコードです：

<div id="content"> 
    <div id="contentscroll"> 
    <div id="contentholder"> 

     <div class="contentitem"> 
     <span class="name">ABC</span> 
     <span class="price">25 €</span> 
    <div class="photo"> 
      <img src="642_03_prod[1].png" height="280" width="280" /> 
      <img src="855_02_prod[1].png" height="280" width="280" /> 
      <img src="856_01_prod[1].png" height="280" width="280" /> 
     </div> 
     <ul class="colors"> 
      <li><a href="#"><img src="642_03_prod[1].png" height="25" width="25" /></a></li> 
      <li><a href="#"><img src="855_02_prod[1].png" height="25" width="25" /></a></li> 
      <li><a href="#"><img src="856_01_prod[1].png" height="25" width="25" /></a></li> 
     </ul> 
     </div> 

     <!--- other contentitem ---> 

    </div> <!--- end contentholder ---> 
    </div> <!--- end contentscroll ---> 
</div> <!--- end content ---> 

これはCSSです：

#contentscroll { 
    background: transparent; 
    width: 990px; 
    height: 386px; 
    overflow: hidden; 
} 

#contentholder { 
    width: 1500px; 
    height: 386px; 
} 

.contentitem { 
    width: 330px; 
    height: 100%; 
    padding: 0; 
    float: left; 
} 

.contentitem .name, .contentitem .price { 
    width: 330px; 
    height: 18px; 
    margin:0; 
    padding: 0; 
    float: left; 
    text-align:center; 
    font:12px Arial, Helvetica, sans-serif; 
    color: #FFF; 
} 

.photo{ 
    height: 280px; 
} 

ul.colors { margin:0; padding:0; height: 18px;} 
ul.colors { list-style-type: none; display: inline; margin:0; padding:0; } 
ul.colors li { background: none; display: inline; margin: 0; padding: 0; } 
ul.colors li a { background: none; border: 0; margin: 0; margin-right: 2px; padding:0; color: #FFF;} 
ul.colors li a img { background: none; border: 0; margin: 0; padding:0; } 

これはJSです：

$('.photo').cycle({ 
    fx:  'turnDown', 
    speed: 'fast', 
    timeout: 0, 
    pager: '.colors', 
    fastOnEvent: true, 
    slideExpr:  null, 
    cleartype: true, 
    cleartypeNoBg: true, 
    pagerAnchorBuilder: function(idx, slide) { 
     // return selector string for existing anchor 
     return '.colors li:eq(' + idx + ') a'; 
} 
}); 

誰も私を助けることができますか？ Cycleは.photoと.colorsにCSSの特質を適用しますが、この事実はこの問題を引き起こしますか？ .nameスパン、.priceスパンスクロール。

Answer 1

私はDebugBarで制御しました：IMGS上の画像のdivコンテナとposition: absolute, display: block上position:relativeがあり

<DIV class=photo style="WIDTH: 280px; POSITION: relative; HEIGHT: 280px" cycleStop="0" cyclePause="0" cycleTimeout="0" jQuery1245766927421="13"> 

<IMG style="DISPLAY: none; Z-INDEX: 3; LEFT: 0px; ZOOM: 1; POSITION: absolute; TOP: 280px; HEIGHT: 0px" height=280 src="642_03_prod[1].png" width=280 cycleH="280" cycleW="280" jQuery1245766927421="10"> 
<IMG style="DISPLAY: block; Z-INDEX: 4; LEFT: 0px; WIDTH: 280px; ZOOM: 1; POSITION: absolute; TOP: 0px; HEIGHT: 280px" height=280 src="855_02_prod[1].png" width=280 cycleH="280" cycleW="280" jQuery1245766927421="11"> 
<IMG style="DISPLAY: none; Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 0px" height=280 src="856_01_prod[1].png" width=280 cycleH="280" cycleW="280" jQuery1245766927421="12"> 

</DIV> 

：サイクルは、いくつかのスタイルとプロパティを追加します。 これらの属性は問題の原因だと思いますが、削除方法はわかりません。

Answer 2

ファイルjquery.cycle.all.js：

ライン187：

// container requires non-static position so that slides can be position within 
    if ($cont.css('position') == 'static') 
     $cont.css('position', 'relative'); 

ライン212：

// set position and zIndex on all the slides 
    $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) { 
     var z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i; 
     $(this).css('z-index', z) 
    }); 

私はJSのこれら2つの部分は解決することが重要だと思います問題はありますが、私はどのようにわかりません。