تأثير في آي إي
التأثيرات في موزيلا فايرفوكس
يحدث هذا بسبب خطأ في تفسير IE للمسافة بين الصناديق (راجع "مشاكل النماذج العائمة" الخاصة بـ onestab). لم أقم بحل هذه المشكلة أبدًا حتى قمت بترجمة "الجدول مقابل CSS--معركة الحياة والموت". ساعدتني نصيحة من المؤلف في العثور على حل: استخدم !مهم.
!important هو بناء جملة محدد في CSS1، وتتمثل وظيفته في زيادة أولوية التطبيق لقواعد النمط المحددة (انظر: شرح W3.org). يتم كتابة تنسيق بناء الجملة { sRule!important } في نهاية التعريف، على سبيل المثال:
مربع {اللون: أحمر! مهم؛}
النقطة الأكثر أهمية هي أن IE لم يدعم بناء الجملة هذا مطلقًا، لكن المتصفحات الأخرى تفعل ذلك. لذلك، يمكننا استخدام هذا لتحديد أنماط مختلفة لـ IE والمتصفحات الأخرى. على سبيل المثال، نحدد نمطًا مثل هذا:
اختبار الألوان {
الحدود: 20px الصلبة #60A179! مهم؛
الحدود: 20px صلب #00F؛
الحشو: 30 بكسل؛
العرض: 300 بكسل؛
}
عند التصفح في Mozilla، يمكنك فهم أولوية !important، لذلك يتم عرض اللون #60A179:
عند التصفح في IE، لا يتم فهم أولوية !important، لذلك يتم عرض اللون #00F:
كما ترون، باستخدام !important، يمكننا تعيين أنماط مختلفة لمتصفحات IE والمتصفحات غير التابعة لـ IE، ما عليك سوى إضافة !important بعد نمط المتصفح غير التابع لـ IE. لذلك، يمكن حل اختلاف العرض بمقدار 2 بكسل على صفحتي الرئيسية المذكورة أعلاه بسهولة:
الحشو العلوي: 11 بكسل! مهم؛
الحشو العلوي: 9 بكسل؛
!important ستصبح بالتأكيد أداة قوية لتخطيط CSS، يرجى تذكرها وإتقانها :)
