عندما يتعلق الأمر بآلية معالجة CSS، فإن IE لديه دائمًا الكثير من الأشياء التي تجعل الأشخاص يتقيؤون الدم، لكنهم ما زالوا سعداء بالتحسينات الحالية.
خذ دعم الفئة الزائفة: تحوم كمثال، أضاف IE7+ أخيرًا دعمًا لعلامات أخرى غير a. بالطبع، يجب أن نشيد بهذه التحسينات، ولكن في ظل IE6، فإن دعم :hover لـ a ليس مرضيًا جدًا. فيما يلي مشكلة أريد أن أتحدث عنها بإيجاز: قم بالتحويم في IE6 والمتصفحات السابقة.
قد يعرف الكثير من الأشخاص بالفعل بعض المشكلات المتعلقة بـ :hover في IE6 والمتصفحات السابقة (المشار إليها فيما يلي باسم IE6-). أريد بشكل أساسي أن أتحدث عن مشكلات مثل a:hoverspan{}.
في بعض الأحيان، من أجل إضافة بعض التأثيرات الديناميكية البسيطة، غالبًا ما نستخدم :hover للمساعدة. على سبيل المثال، غالبًا ما نقوم بتغيير لون النص عندما يمرر الماوس فوق الرابط. يحب:
نعم، سيعمل هذا في جميع المتصفحات. ولكن إذا قمت بتغييره إلى هذا:
ستجد أنه لا يحدث أي شيء ضمن IE6-، وأن أنماطنا غير صالحة. نعم، هذا كل شيء، كان من المفترض أن يواجه العديد من الأشخاص هذه المشكلة ويحلونها.
نعم، ما عليك سوى إضافة نمط a:hover{} آخر لحل هذه المشكلة، والذي يمكن أن يحتوي على تكبير/تصغير وحشو وهامش وسمات أخرى. على النحو التالي:
بعد رؤية استعادة التأثير الطبيعي، فكرت فيما قد يكون سبب فشل :hover. يمكنك استخدام التكبير/التصغير والعرض والحشو والسمات الأخرى للقيام بذلك، لذلك اعتقدت أنه قد يكون بسبب haslayout. حسنا، ربما هذا هو الحال. ولكن إذا واصلت الاختبار، فستجد أنه بغض النظر عن السمات التي تكتبها في a:hover{}، مثل اللون وحجم الخط والتجاوز (حتى السمات غير الموجودة، مثل xx:yyy)، يمكنك استعادته.
هل تشعر بالذهول قليلاً بعد اختباره هنا؟ نعم، أنا كذلك. أما السبب فلا أعرفه بعد، ربما هناك من يعرفه.
أ:تحوم {التكبير: 1؛}
أ:تحويم م {اللون: #F00؛}
<a href="؟">تغيير <em>اللون</em></a> عند تمرير الماوس
أ:تحويم م {اللون: #F00؛}
<a href="؟">تغيير <em>اللون</em></a> عند تمرير الماوس
أ:تحويم {اللون: #F00؛}
<a href="؟">تغيير اللون عند تمرير الماوس</a>