يومض التمرير المستند إلى CSS في IE6

Question

أنا أستخدم "خدعة" التمرير المستندة إلى CSS والتي تعمل على تبديل موضع الخلفية لصورة خلفية العنصر عند التمرير.

سي اس اس

#welcome #step1 
{background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll left top;}
#welcome #step1:hover 
{background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll right top;}

HTML

<div id="welcome">
<a class="steps" id="step1" href="?page=signup"></a>
...
</div>

من الطبيعي أن يفسد IE6 هذا الشيء البسيط.كل ما عندي من التمريرات يومض.

عند تمرير الماوس فوق الصورة تختفي للحظة ثم تنتقل إلى الحالة الزائدة.هناك ميزة مثيرة للاهتمام، إذا انتقلت بعيدًا عن الصفحة ثم قمت بالضغط على زر "الرجوع"، يبدو أن المشكلة قد انتهت!

أعتقد أن الأمر يتعلق بملفات صور PNG (على الرغم من عدم توفر أي شفافية) أو ربما شيء بسيط مثل نوع المستند (XHTML الانتقالي)

شكرا لبصيرتك.

يحرر (تم حلها):

قدمت Jitendra الرابط لحل المشكلة.لقد أضفت هذا ببساطة إلى الرأس:

<!--[if IE 6]>
<style type="text/css" >

html {
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
}
</style>
<![endif]-->

Answer 1

انظر هذه الحلول-

http://ajaxian.com/archives/no-more-ie6-background-flicker

http://www.hedgerwow.com/360/bugs/dom-fix-ie6-background-image-flicker.html

Answer 2

يطلب المتصفح الصورة من الخادم لكل قاعدة CSS تحدد فيها url() ملكية.لإصلاح هذه المشكلة، ما عليك سوى الجمع بين background جزء من القاعدتين في قاعدة واحدة وقم بتعيين background-position خاصية لكل حالة من كائن CSS.

#step1, #step1:hover {
    background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll;
}
#step1 {
    background-position: left top;
}
#step1:hover {
    background-position: right top;
}

هذه المشكلة تحدث بالفعل في العديد من المتصفحات.إنه أكثر وضوحًا في IE6.

كملاحظة جانبية، إذا كنت تستخدم المعرفات، فإن تحديد معرفين في المحدد الخاص بك ليس ضروريًا.يجب أن تكون المعرفات فريدة للصفحة.

Answer 3

لم يعد لدي IE6 للاختبار به، ولكن هل قمت بالتحقق للتأكد من أن الصورة قابلة للتخزين المؤقت بالكامل بواسطة العميل؟يجب أن تحتوي على انتهاء صلاحية صريح أو تحكم في ذاكرة التخزين المؤقت:الحد الأقصى لعمر رأس HTTP.

Answer 4

تتناول هذه المقالة مناقشة مسببات هذه المشكلة وبعض الحلول الأخرى: http://web.archive.org/web/20100105213004/http://www.fivesevensix.com/studies/ie6flicker/

أيضًا، يمكن تحسين CSS لإصلاح هذه المشكلة كما هو منصوص عليه بواسطة Gabriel من أجل:

#step1 {
    background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll left top;
}
#step1:hover {
    background-position: right top;
}

Answer 5

من أجل المتعة، ماذا يحدث إذا كان نمط :hover محددًا فقط

 {background-position: right top;}

Answer 6

يبدو وكأنه حالة نموذجية لـ "IE6 Flicker" والتي تنتج عن إعداد في IE6.يقوم المتصفح بإعادة طلب الصورة من الخادم عند التمرير...حق غبي؟هل حاولت "التخزين المؤقت المزدوج" للصورة؟أعني بهذا وضع نفس صورة الخلفية على كل من العنصر الأصلي والرابط نفسه.المثال أدناه:

#welcome {
background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll left top;
}
#welcome #step1 {
background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll left top;
}
#welcome #step1:hover {
background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll right top;
}

اسمحوا لي أن أعرف كيف تحصل على :)