我有以下 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;有布局:真; }
如何阻止背景图像在 IE 中消失?
最佳答案
您必须将属性 cleartypeNoBg 设置为 true,正如他们在 options reference 上所说的那样
$('#similar-products').cycle({ cleartypeNoBg: true, fx: 'scrollHorz', speed: 1000, timeout: 0, next: $('.next') });
关于jquery - 运行 jQuery .cycle() 后,CSS 背景图像在 IE (6, 7, 8) 中消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1298472/