واحدة من أكثر الإحصاءات الغريبة حول المتصفحات هي أن إصدارات Internet Explorer 6 و 7 و 8 تعايش. اعتبارًا من هذه المقالة ، تمثل إصدارات Internet Explorer حوالي 65 ٪ من حصة السوق في المجموع. في مجتمع تطوير موقع الويب ، يكون هذا الرقم أصغر بكثير ، وتظهر الإحصائيات أنه حوالي 40 ٪ فقط.
الجزء الأكثر إثارة للاهتمام من هذه الإحصائيات هو أن القيم بين IE6 و IE7 و IE8 قريبة جدًا ، مما يمنع متصفح Microsoft واحد من السيطرة على عكس الماضي. وفقًا لهذه الإحصاءات المؤسفة ، من الضروري للمطورين إجراء اختبارات شاملة لجميع متصفحات IE المستخدمة حاليًا عند تطوير مواقع الويب للعملاء ، وسيؤدي ذلك أيضًا إلى جذب المزيد من المستخدمين في المشاريع الشخصية.
بفضل مكتبات JavaScript هذه (الأطر) ، فإن اختبار JavaScript المتقاطع هو أقرب ما يسمح به الموقف الحالي. ولكن هذا ليس هو الحال في تطوير CSS ، وخاصة الإصدارات الثلاثة الموجودة حاليًا في IE.
تحاول هذه المقالة تقديم مرجع مفصل وسهل الاستخدام لمختلف المطورين الذين يرغبون في فهم دعم CSS لـ IE6 و IE7 و IE8. يحتوي هذا المرجع على نظرة عامة وتوافق في المواقف التالية:
A. أحد المتصفحات الثلاثة يدعم الإدخالات ولكن الاثنان الآخران لا يفعلان ذلك.
ب. اثنان من المتصفحات الثلاثة يدعمون الإدخال ولكن الآخر لا يدعمه.
هذا المقال لن يناقش:
أ. الإدخالات التي لا تدعمها المتصفحات الثلاثة
سمات خاصة
لذلك ، فإن تركيز هذه المقالة على الفرق بين المتصفحات الثلاثة ، بدلاً من عيوب الدعم اللازمة. القائمة مقسمة إلى الأجزاء الخمسة التالية:
1. المحدد والميراث
2. الفئات الزائفة والعناصر الزائفة
3. دعم السمة
4. التقنيات الأخرى
5. الأخطاء المهمة وعدم التوافق
1. المحدد والميراث
أ
مثال
| body> p { اللون: #ffff ؛ } |
يصف
يختار محدد الطفل جميع عناصر الأطفال المباشرة لعنصر أمين معين.
يدعم
| IE6 لا IE7 نعم ie8 نعم |
البق
في IE7 ، إذا كان هناك تعليق HTML بين علامة الأصل وعلامة الطفل ، فلن يعمل محدد الطفل.
سلسلة
مثال
| .class1.class2.class3 { الخلفية: #ffff ؛ } |
يصف
يتم استخدام فئة السلسلة لإرسال عنصر HTML مع إعلانات فئة متعددة ، مثل هذا:
| <div class = "class1 class2"> <p> المحتوى هنا. </p> </div> |
يدعم
| IE6 لا IE7 نعم ie8 نعم |
البق
يبدو أن IE6 يدعم هذا الموقف لأنه يمكن أن يتطابق مع الفئة الأخيرة في السلسلة مع العنصر الذي يستخدم الفصل ، ومع ذلك ، فإنه لا يحد من عنصر يستخدم جميع الفئات في السلسلة.
C. سمة محدد
مثال
| A [HREF] { اللون: #0f0 ؛ } |
يصف
يسمح هذا المحدد بوضع عنصر طالما أنه قد حدد خصائص. في المثال أعلاه ، ستكون جميع العلامات التي تحتوي على سمة HREF محدودة ، في حين أن العلامات بدون سمة HREF لن تكون محدودة.
يدعم
| IE6 لا IE7 نعم ie8 نعم |
د. يقترب من محدد الأخ
مثال
| H1+P { اللون: #F00 ؛ } |
يصف
يحدد هذا المحدد علامات الأخوة القريبة من العنصر المحدد. المثال أعلاه سيحد من العلامة P ، ولكن يجب أن يكون شقيق علامة H1 ويجب أن يتبع مباشرة خلف علامة H1. على سبيل المثال:
| <h1> العنوان </h1> <p> المحتوى هنا. </p> <p> المحتوى هنا. </p> |
في الكود أعلاه ، سيعمل نمط CSS فقط لأول p. لأنه شقيق H1 ويتبع H1 على الفور. P الثاني هو أيضا شقيق H1 ، لكنه لا يتبع H1 على الفور.
يدعم
| IE6 لا IE7 نعم ie8 نعم |
البق
في IE7 ، إذا كان هناك تعليق HTML بين الأشقاء ، فسيكون محدد الأخوة المجاور غير صالح.
E. محدد الأخ العادي
مثال
| H1 ~ P { اللون: #F00 ؛ } |
يصف
يحدد هذا المحدد جميع عناصر الأخوة بعد عنصر محدد. سيعمل تطبيق هذا المحدد على المثال أعلاه لكلا العلامات P. بالطبع ، إذا ظهر عنصر P قبل H1 ، فلن يتم مطابقة عنصر P.
يدعم
| IE6 لا IE7 نعم ie8 نعم |