1. تفسيرات مختلفة لمترجمي المربع #box{.
العرض: 600 بكسل؛ // لـ ie6.0-
width:500px؛ // لـ ff+ie6.0
}
#صندوق{
العرض: 600 بكسل! مهم // لصص
العرض: 600 بكسل؛ // لـ ff+ie6.0
العرض: 500 بكسل؛ // لـ ie6.0-
}
2. لإخفاء CSS في IE، استخدم المحدد الفرعي
html>body #box{ }
3، معترف بها فقط من قبل IE
*أتش تي أم أل #مربع{ }
4. صالح في ie/win ولكنه مخفي في ie/max، استخدم شرطة مائلة عكسية
5. حدد النمط بشكل منفصل على سبيل المثال
6. المسافة المزدوجة الناتجة عن العائمة
#صندوق{
تعويم: يسار؛
العرض: 100 بكسل؛
هامش:0 0 100px; // في هذه الحالة، سيقوم IE بإنشاء مسافة 200 بكسل
عرض: مضمنة؛ // تجاهل العوامات
}
دعونا نتحدث عن عنصري الكتلة والمضمّنين بالتفصيل هنا. خصائص عنصر الكتلة هي: يبدأ دائمًا في سطر جديد، ويمكن التحكم في الارتفاع والعرض وارتفاع الخط والهوامش (عناصر الكتلة)؛ خصائص العنصر المضمن هي: و العناصر الأخرى على نفس السطر، ... لا يمكن التحكم فيها (العناصر المضمنة)؛
#صندوق{
Display:block; // يمكن محاكاة العناصر المضمنة كعناصر كتلة
Display:inline; // تحقيق تأثير الترتيب في نفس السطر
diplay:table; // لـ ff، محاكاة تأثير الجدول
}
7، للأوبريا فقط
@media الكل و (min-width:0px){
#صندوق{ }
}
8. مشاكل مع IE والعرض والارتفاع
لا يتعرف IE على تعريف min-، ولكنه في الواقع يتعامل مع العرض والارتفاع الطبيعي كما لو كان هناك min. ستكون هذه مشكلة كبيرة إذا كنت تستخدم العرض والارتفاع فقط.
لن تتغير هاتان القيمتان في المتصفحات العادية. إذا كنت تستخدم min-width وmin-height فقط، فهذا يعني أنه لم يتم تعيين العرض والارتفاع على الإطلاق ضمن IE.
على سبيل المثال، إذا كنت تريد تعيين صورة خلفية، فإن هذا العرض أكثر أهمية. لحل هذه المشكلة، يمكنك القيام بذلك:
#box{
العرض: 80 بكسل؛
الارتفاع: 35 بكسل؛
}
أتش تي أم أل>الجسم #مربع{
العرض: تلقائي؛
الارتفاع: تلقائي؛
الحد الأدنى للعرض: 80 بكسل؛
الحد الأدنى للارتفاع: 35 بكسل؛
}
9. الحد الأدنى لعرض الصفحة،
min-width، هو أمر CSS مناسب للغاية، حيث يمكنه تحديد أن الحد الأدنى لعرض العنصر لا يمكن أن يكون أقل من عرض معين، وذلك لضمان صحة التنضيد دائمًا. لكن IE لا يتعرف على هذا، ويتعامل مع العرض باعتباره الحد الأدنى للعرض. ولجعل هذا الأمر متاحًا أيضًا على IE، يمكنك وضعه تحت علامة <body>، ثم تحديد فئة لـ div. تم تصميم CSS على النحو التالي:
#container{.
الحد الأدنى للعرض: 600 بكسل؛
العرض: التعبير (document.body.clientWidth < 600؟ "600px": "auto" );
}
الحد الأدنى للعرض الأول طبيعي، لكن العرض في السطر الثاني يستخدم جافا سكريبت، والذي لا يتعرف عليه إلا IE، مما سيجعل مستند HTML الخاص بك أقل رسمية. إنه في الواقع يطبق الحد الأدنى للعرض من خلال حكم جافا سكريبت.
يمكن أيضًا استخدام نفس الطريقة لتحقيق الحد الأقصى لعرض IE:
#حاوية
{
الحد الأدنى للعرض: 600 بكسل؛
أقصى عرض: 1200 بكسل؛
العرض: التعبير (document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "تلقائي";
}
10، تعويم واضح
.هاك بوكس {
عرض: جدول // عرض الكائن كجدول على مستوى عنصر الكتلة
}
أو
.هاك بوكس {
واضح:كلاهما؛
}
أو أضف: بعد (كائن زائف) لتعيين المحتوى الذي يحدث بعد الكائن، وعادةً ما يتم استخدامه مع المحتوى. لا يدعم IE هذا الكائن الزائف ولا يدعمه متصفح Ie، لذلك لا يؤثر على IE/. فوز المتصفحات. -------هذا هو الأصعب..
#الصندوق:بعد{
محتوى: "."؛
عرض: كتلة؛
الارتفاع: 0;
واضح: كلاهما؛
الرؤية: مخفية؛
}
11. ينتج عن نص IE العائم DIV خطأ بحجم 3 بكسل
يتم تعويم الكائن الموجود على اليسار، ويتم تحديد موضعه باستخدام الهامش الأيسر للتصحيح الخارجي، وسيتم تباعد النص الموجود داخل الكائن الموجود على اليمين بمقدار 3 بكسل من اليسار.
#صندوق{
تعويم: يسار؛
العرض: 800 بكسل؛
}
#غادر{
تعويم: يسار؛
العرض: 50%؛
}
#يمين{
العرض: 50%؛
}
*أتش تي أم أل #يسار{
هامش اليمين:-3px; // هذه الجملة هي المفتاح
}
كود HTML
12. محدد السمات (لا يمكن اعتباره متوافقًا، فهو خطأ في إخفاء CSS)
ع[المعرف]{}
div[id]{}
مخفيًا للإصدارات الأقل من IE6.0 وIE6.0.
لا يزال هناك اختلاف بين محددات السمات والمحددات الفرعية المستخدمة بواسطة FF وOPera نطاق الجهاز كبير نسبيًا، على سبيل المثال، في p[id]، تكون جميع علامات p ذات المعرف من نفس النمط.