1. "استخدام المهم في IE6 وFF"
.box1 {العرض: 150 بكسل! مهم؛}
.box1 {العرض: 250 بكسل؛}
!important يعني أن هذا الإعداد له الأولوية. لن يرتكب IE أي خطأ عند مواجهة !important ويتجاهل وظيفته فقط. إذا تم تعيين العرض لاحقًا، فسيأخذ IE العرض الأخير كمعيار. فإنه سيتم استخدام القيمة الحالية، وهي القيمة السابقة! الهامة. على سبيل المثال: #test {width: 300px !important}يعرض كل من IE وFF 300PX. إذا كانت هناك قيمة في النهاية، فسيعرض IE القيمة التالية، وسيعرض FF القيمة مع !import في المقدمة!
تعتبر المتصفحات الأخرى هذا أمرًا مهمًا، نظرًا لوجود علاقة الأولوية، فإن العرض المحدد مسبقًا هو الذي يسود دائمًا.
#اختبار {العرض:300px;العرض:400px !مهم ;}
والنتيجة المعروضة في هذه الجملة هي أن عرض IE وFF هو 400PX
#اختبار {العرض: 300 بكسل! مهم؛ العرض: 400 بكسل؛}
نتيجة عرض هذه الجملة هي FF: 300px IE: 400px
لذلك، عند استخدام !important، ضع الكلمات التي تحتوي على !important في المقدمة.
ولكن المشكلة تأتي مرة أخرى، IE7 يمكن أن يتعرف بالفعل! هام، يرجى الاطلاع أدناه!
2. أنماط CSS لمتصفح فايرفوكس ie6 ie7
في الوقت الحاضر، يستخدم معظمهم !important للقرصنة، ويمكن أن يتم عرض اختبارات ie6 وfirefox بشكل طبيعي، ولكن يمكن لـ ie7 تفسير !important بشكل صحيح، مما سيؤدي إلى عدم عرض الصفحة بالشكل المطلوب! لقد وجدت اختراقًا جيدًا لـ IE7 باستخدام "*+html". الآن قم بتصفحه باستخدام IE7 ولن تكون هناك مشكلة.
الآن اكتب CSS مثل هذا:
#1 { اللون: #333 } /* موز */
* html #1 { اللون: #666 } /* IE6 */
*+html #1 { اللون: #999 } /* IE7 */
ثم يتم عرض لون الخط كـ #333 ضمن Firefox، و#666 ضمن IE6، و#999 ضمن IE7. يمكنك استخدام "+" لتنفيذ CSS Hack الذي لا يتعرف عليه إلا IE. وقد يفكر بعض الأصدقاء في استخدام "_" Hack ولكن يتم تمييزها لأنه لم يتم التعرف على "_" في IE7. لذا استخدم +
نتائج الاختبار:
يمكن لمتصفحات IE5.5 وIE6 وIE7 التعرف عليه؛
ولا تتعرف عليه متصفحات FF2.0 وOpera 9 وSafari 2.
3. اختراق IE7
لقد أصلح IE7 العديد من الأخطاء وأضاف دعمًا لبعض المحددات، لذا فإن الاختراقات لإخفاء أو عرض IE مثل *html {}، html>body {}، !important، وما إلى ذلك لن تعمل في IE7. على الرغم من أن CSS Hack غير موصى به وأن التعليقات الشرطية عبارة عن مرشح مضمون، إلا أن التعليقات الشرطية لا يمكن أن تظهر إلا في HTML، لذلك لا يزال CSS Hack له مكانه. اكتشف Nanobot بعض اختراقات CSS لـ IE7، على وجه التحديد:
> الجسم
أتش تي أم أل*
*+أتش تي أم أل
من بين طرق الكتابة الثلاثة هذه، تعتبر أول طريقتين غير قانونيتين للكتابة في CSS ويتم تجاهلهما في المتصفحات المتوافقة مع المعايير، لكن IE7 لا يعتقد ذلك. بالنسبة إلى >body، سيتم استبدال المحدد المفقود بالمحدد العام *، أي أنه ستتم معالجته في *>body، وهذه الظاهرة موجودة أيضًا ليس فقط للمحدد >، ولكن أيضًا للمحددات + و~. بالنسبة إلى html*، نظرًا لعدم وجود مسافة بين html و*، فهذا أيضًا خطأ في بناء جملة CSS، لكن IE7 لن يتجاهله، ولكنه يعتقد خطأً أن هناك مسافة هنا. بالنسبة للنوع الثالث *+html، يعتقد IE7 أن إعلان DTD الموجود أمام html هو أيضًا عنصر، لذلك سيتم تحديد html من بين هذه الطرق الثلاث، هذه الطريقة فقط هي كتابة CSS القانونية، مما يعني أنها يمكنها اجتياز المدقق. وبالتالي فإن التحقق هو أيضًا استخدام للاختراق أوصى به المؤلف.
إنترنت إكسبلورر 6 وما دونه
استخدم * html {} لتحديد عنصر html.
آي إي 7 وما دونه
استخدم *+html, * html {} لتحديد عنصر html.
آي إي 7 فقط
استخدم *+html {} لتحديد عنصر html.
IE 7 والمتصفحات الحديثة فقط
استخدم html>body {} لتحديد عنصر الجسم.
المتصفحات الحديثة فقط (وليس IE 7)
استخدم html>/**/body {} لتحديد عنصر النص.
4. IE وFF لهما تفسيرات مختلفة لنموذج الصندوق الوصف الرمزي: #test { width: 650px !important;width: 648px;padding-left:2px;background:#fff }
عرض النطاق الترددي المعروض بالاختبار هو 650 بكسل
العرض الإجمالي لـ IE Box هو: مجموع عرض العرض + الحشو + الحدود + الهامش. إجمالي عرض صندوق FF هو عرض العرض، ويتم تضمين عرض الحشو + الحدود + الهامش في العرض.
إذا كان هناك BOX{WIDTH:"300"; PADDING:"5PX";}، فيجب أن يكون عرض BOX في IE: 310. عرض FF هو 300، لذا عندما يمتلئ الصندوق، يجب عليك استخدام BOX{WIDTH: "290"!IMPORTANT; WIDTH: "300";}، وذلك للتأكد من أن عرض الصندوق دائمًا هو 300 بكسل، و لن تكون هناك ظاهرة تمدد، وفي FF لن تكون هناك حالة لا تمتلئ فيها الطبقة العائمة بالكامل.
5. تحتوي علامة ul على قيمة الحشو في Mozilla، ولكن الهامش فقط له قيمة في IE.
تعيين ul{margin:0;padding:0}
6. لا يستطيع IE التمييز بين علاقة الميراث وعلاقة الأب والابن، فكلها علاقات ميراث.
7. سيؤدي ضبط الحشو على div في FF إلى زيادة العرض والارتفاع، لكن IE لن يفعل ذلك (يمكن حله باستخدام !مهم).
8. مشكلة التمركز
1. توسيط عموديًا. اضبط ارتفاع الخط على نفس ارتفاع القسم الحالي، ثم قم بتمرير المحاذاة العمودية: الأوسط (احرص على عدم التفاف المحتوى.)
2. الهامش المتمركز أفقيًا: 0 تلقائي (بالطبع ليس عالميًا).
3. إذا كنت بحاجة إلى إضافة أنماط إلى المحتوى الموجود في العلامة، فأنت بحاجة إلى تعيين العرض: كتلة (شائع في علامات التنقل)
4. يؤدي الاختلاف في فهم BOX بين FF وIE إلى اختلاف بمقدار 2 بكسل ومشاكل مثل هامش مجموعة div التي تم تعيينها لتطفو بشكل مضاعف تحت IE.\
5. عروض مختلفة لـ UL:
تحتوي العلامة ul على نمط القائمة والحشوة بشكل افتراضي ضمن FF، ومن الأفضل الإعلان عنها مسبقًا لتجنب حدوث مشكلات غير ضرورية (شائعة في علامات التنقل وقوائم المحتوى).
6. لا تقم بتعيين ارتفاع div كغلاف خارجي، فمن الأفضل إضافة الفائض: مخفي لتحقيق التكيف مع الارتفاع.
9. فيما يتعلق بمؤشر اليد، فإنه ينطبق فقط على IE. إذا تعرف عليه كل من IE وFF، فيرجى استخدام المؤشر: المؤشر.