لماذا لا تعمل مجموعة الفئة الزائفة من سمة الخلفية بالإضافة إلى a و a:hover تحت المنطق العادي في IE6؟ لقد اختبرت وجود هذه المشكلة في متصفح IE6 والمتصفحات الأقدم، وكثيرًا ما واجهت هذه المشكلة واستخدمت طرقًا أخرى لاستبدالها.
لنأخذ التنقل كمثال. الكود التالي يتماشى تمامًا مع منطق CSS. من الناحية النظرية، يجب أن تكون " صورة خلفية a:hove " مدمجة مع "وضع الخلفية a.nav_1" للحصول على النتيجة المتوقعة بشكل غير طبيعي يعرض فقط صورة الخلفية. لا يوجد عرض توضيحي لإحداثيات الخلفية (يرجى استخدام IE6 وIE6 أو المتصفحات الأعلى للمقارنة).
*{الهامش:0;الحشو:0;}
.header{ الموضع: العرض: 745 بكسل؛ الارتفاع: 225 بكسل؛ الخلفية: url(bg.jpg) بدون تكرار؛}
/*ملاحة*/
#nav p{ الموضع: اليسار المطلق: 0؛ العرض: 100٪؛}
#nav a{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav a:hover{background:url(bg.jpg) بدون تكرار 0 0;}
/*حالة التنقل: متصفح IE6 والمتصفحات الأقدم غير متوافقة، والمتصفحات الأخرى عادية*/
#nav a.nav_1{width:80px;background-position:0 -213px;}
#nav a.nav_2{width:86px;background-position:-80px -213px;}
#nav a.nav_3{width:227px;background-position:-166px -213px;}
#nav a.nav_4{width:92px;background-position:-393px -213px;}
#nav a.nav_5{width:98px;background-position:-485px -213px;}
#nav a.nav_6{width:162px;background-position:-583px -213px;}
كان الحل الذي استخدمته من قبل هو إضافة المحدد المقابل من خلال الحالة. تشعر هذه الطريقة أن الكود يبدو منتفخًا، وباعتباري مهووسًا بالشفرات، يصعب علي قبول العرض التوضيحي .
/*حالة تمرير التنقل: الحل السابق*/
#nav a.nav_1:hover,
#nav a.nav_1{width:90px;background-position:0 -211px;}
#nav a.nav_2:hover,
#nav a.nav_2{width:86px;background-position:-80px -213px;}
#nav a.nav_3:hover,
#nav a.nav_3{width:227px;background-position:-166px -213px;}
#nav a.nav_4:hover,
#nav a.nav_4{width:92px;background-position:-393px -213px;}
#nav a.nav_5:hover,
#nav a.nav_5{width:98px;background-position:-485px -213px;}
#nav a.nav_6:hover,
#nav a.nav_6{width:162px;background-position:-583px -213px;}
من الناحية النظرية، يكون محدد "a.nav_1" أعلى من "a:hover"، ولكن عندما حاولت إضافة !important، وجدت أن IE6 يعرض العرض التوضيحي العادي.
لا توجد أي آثار جانبية عند اختبار المتصفحات الأخرى، ويبدو أن هذه المرة لا علاقة لها بـ haslayout، لكن أسبابها ونتائجها محيرة أيضًا.
/*حالة تمرير التنقل: الحل الحالي*/
#nav a.nav_1{width:80px;background-position:0 -211px!important;}
#nav a.nav_2{width:86px;background-position:-80px -213px!important;}
#nav a.nav_3{width:227px;background-position:-166px -213px!important;}
#nav a.nav_4{width:92px;background-position:-393px -213px!important;}
#nav a.nav_5{width:98px;background-position:-485px -213px!important;}
#nav a.nav_6{width:162px;background-position:-514px -213px!important;}
الحل الذي قدمه ytzong جيد جدًا ~ يبدو أن عدم استخدام اختصارات الخلفية لا يزال له مزاياه. توجد بالفعل مشكلة في منطق إضافة الخلفية في IE6، وقد قمت أيضًا باختبار سمة الحدود ولم يكن لدى العرض التوضيحي هذه المشكلة.
*{الهامش:0;الحشو:0;}
.header{ الموضع: العرض: 745 بكسل؛ الارتفاع: 225 بكسل؛ الخلفية: url(bg.jpg) بدون تكرار؛}
/*ملاحة*/
#nav p{ الموضع: اليسار المطلق: 0؛ الأعلى: 180 بكسل العرض: 100٪؛}
#nav pa{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav pa:hover{background-image:url(bg.jpg);
/*حالة التنقل: متصفح IE6 والمتصفحات الأقدم غير متوافقة، والمتصفحات الأخرى عادية*/
#nav p a.nav_1{width:80px;background-position:0 -213px;}
#nav p a.nav_2{width:86px;background-position:-80px -213px;}
#nav p a.nav_3{width:227px;background-position:-166px -213px;}
#nav p a.nav_4{width:92px;background-position:-393px -213px;}
#nav p a.nav_5{width:98px;background-position:-485px -213px;}
#nav p a.nav_6{width:162px;background-position:-583px -213px;}
لا أعرف إذا كان هناك طريقة أفضل ~