Цикл jQuery в div с горизонтальной прокруткой: проблема IE

Question

В IE 6 и 7 возникла проблема с показом слайдов в цикле в горизонтальном прокручиваемом элементе div Я использовал эту технику (http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div) для создания горизонтального прокручиваемого div. Я бы вставил слайд-шоу Cycle в прокручиваемый div. Все нормально работают в 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 свойство CSS к .photo и .colors, и этот факт создает эту проблему? .name span e .price span scroll.

Answer 1

Файл 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)
    });

Я думаю, что эти 2 части JS важны для решения проблемы, но я не знаю как.

Answer 2

Я управлял с помощью DebugBar: цикл добавляет некоторые стили и свойства:

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

Существует контейнер position:relative для изображений div и position: absolute, display: block на imgs. Я думаю, что эти атрибуты ответственны за проблему, но я не знаю, как их удалить.