CSSの背景画像（（、6、7 8）IEで消えjQueryの.cycleを実行した後）

Question

私は、次のようなHTMLがあります。私は4のグループで、これらの製品を巡回したい

<div id="similar-products" class="box small"> 
<div class="product"> 
    <h3><a href="#">Lorem ipsum 1</a></h3> 
    <p class="figure"><img src="_img/thumb/blah.png" alt=""></p> 
    <p class="price">€ 19,99</p> 
    <p class="more-info"><a href="#more-info">More info</a></p> 
    <p class="add-to-cart"><a href="#add">Add to shopping bag</a></p> 
</div> 
<div class="product"> 
    <h3><a href="#">Lorem ipsum 2</a></h3> 
    <p class="figure"><img src="_img/thumb/blah.png" alt=""></p> 
    <p class="price">€ 19,99</p> 
    <p class="more-info"><a href="#more-info">More info</a></p> 
    <p class="add-to-cart"><a href="#add">Add to shopping bag</a></p> 
</div> 
<div class="product"> 
    <h3><a href="#">Lorem ipsum 3</a></h3> 
    <p class="figure"><img src="_img/thumb/blah.png" alt=""></p> 
    <p class="price">€ 19,99</p> 
    <p class="more-info"><a href="#more-info">More info</a></p> 
    <p class="add-to-cart"><a href="#add">Add to shopping bag</a></p> 
</div> 
<div class="product"> 
    <h3><a href="#">Lorem ipsum 4</a></h3> 
    <p class="figure"><img src="_img/thumb/blah.png" alt=""></p> 
    <p class="price">€ 19,99</p> 
    <p class="more-info"><a href="#more-info">More info</a></p> 
    <p class="add-to-cart"><a href="#add">Add to shopping bag</a></p> 
</div> 
<div class="product"> 
    <h3><a href="#">Lorem ipsum 5</a></h3> 
    <p class="figure"><img src="_img/thumb/blah.png" alt=""></p> 
    <p class="price">€ 19,99</p> 
    <p class="more-info"><a href="#more-info">More info</a></p> 
    <p class="add-to-cart"><a href="#add">Add to shopping bag</a></p> 
</div> 
<div class="product"> 
    <h3><a href="#">Lorem ipsum 6</a></h3> 
    <p class="figure"><img src="_img/thumb/blah.png" alt=""></p> 
    <p class="price">€ 19,99</p> 
    <p class="more-info"><a href="#more-info">More info</a></p> 
    <p class="add-to-cart"><a href="#add">Add to shopping bag</a></p> 
</div> 
<div class="product"> 
    <h3><a href="#">Lorem ipsum 7</a></h3> 
    <p class="figure"><img src="_img/thumb/blah.png" alt=""></p> 
    <p class="price">€ 19,99</p> 
    <p class="more-info"><a href="#more-info">More info</a></p> 
    <p class="add-to-cart"><a href="#add">Add to shopping bag</a></p> 
</div> 
<div class="product"> 
    <h3><a href="#">Lorem ipsum 8</a></h3> 
    <p class="figure"><img src="_img/thumb/blah.png" alt=""></p> 
    <p class="price">€ 19,99</p> 
    <p class="more-info"><a href="#more-info">More info</a></p> 
    <p class="add-to-cart"><a href="#add">Add to shopping bag</a></p> 
</div> 
</div> 

を。だから私は、次のJavaScript（jQueryの）を使用しています：あなたが見ることができるように、サイクルのプラグインを起動した後、#similar-productsのCSSの背景画像がIEで消え

// Wrap every four elements in a DIV 
var elems = $('#similar-products div'); 
for (var i = 0; i < elems.length; i += 4) { 
elems.slice(i, i + 4).wrapAll('<div class="wrap">'); // split of four and wrap them in another DIV 
} 

$('#similar-products').after('<p class="next"><a href="#next">Next 4 suggestions</a></p>'); 

alert('Before this alert(), things look fine, even in IE!'); 

// Invoke the jQuery Cycle plugin; this causes the CSS background image of #similar-products to disappear in IE 
$('#similar-products').cycle({ fx: 'scrollHorz', speed: 1000, timeout: 0, next: $('.next') }); 

。私はすでに試した

もの：IE用hasLayoutを設定

• #similar-products, #similar-products .wrap, #similar-products .wrap div { position: relative; }
• ：#similar-products, #similar-products .wrap, #similar-products .wrap div { zoom: 1; hasLayout: true; }

私はIEで消えるから背景画像をどのように停止することができますか？

Answer 1

彼らは先端のためoptions reference

$('#similar-products').cycle({ cleartypeNoBg: true, fx: 'scrollHorz', speed: 1000, timeout: 0, next: $('.next') }); 

Answer 2

divで関数を呼び出した後、JQueryを使用するときに同様の問題が発生しました。私は、関数を呼び出した後に背景画像を再適用するのが通常機能することを発見しました。