تختفي صورة الخلفية CSS في IE (6، 7، 8) بعد تشغيل JQuery .cycle ()
-
18-09-2019 - |
سؤال
لدي 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 javaScript التالية:
// 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') });
كما ترون، بعد استدعاء البرنامج المساعد دورة، صورة خلفية CSS #similar-products
يختفي في IE.
أشياء حاولت بالفعل:
#similar-products, #similar-products .wrap, #similar-products .wrap div { position: relative; }
- ضبط
hasLayout
ل IE:#similar-products, #similar-products .wrap, #similar-products .wrap div { zoom: 1; hasLayout: true; }
كيف يمكنني إيقاف صورة الخلفية من الاختفاء في أي؟
المحلول
يجب عليك تعيين الخاصية ClearTyPenobg إلى True، كما يقولون على مرجع الخيارات
$('#similar-products').cycle({ cleartypeNoBg: true, fx: 'scrollHorz', speed: 1000, timeout: 0, next: $('.next') });
نصائح أخرى
لقد قضيت مشكلات مماثلة عند استخدام JQuery بعد استدعاء وظيفة على DIV. لقد وجدت أن إعادة تطبيق صورة الخلفية بعد استدعاء الوظيفة عادة ما تعمل.
لا تنتمي إلى StackOverflow