Question

我有以下HTML：

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

// 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') });

如您所见，在调用Cycle插件后，#similar-products的CSS背景图像在IE中消失。

我已经尝试过的事情：

#similar-products, #similar-products .wrap, #similar-products .wrap div { position: relative; }
为IE设置hasLayout：#similar-products, #similar-products .wrap, #similar-products .wrap div { zoom: 1; hasLayout: true; }

如何阻止背景图像在IE中消失？

Answer 1

你必须将属性cleartypeNoBg设置为true，正如他们在options reference

上所说的那样

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

Answer 2

在调用div上的函数后使用JQuery时遇到了类似的问题。我发现在调用函数后重新应用背景图像通常有效。

运行jQuery后，CSS背景图像在IE（6,7,8）中消失.cycle（）

2 个答案: