أحيانًا ما يسبب توافق CSS مع المتصفحات صداعًا للناس، ربما عندما تفهم التقنيات والمبادئ، لن يكون الأمر صعبًا، فقد قمت بجمع نصائح التوافق لـ IE7 و6 وFireofx من الإنترنت وفرزتها. للانتقال إلى web2.0، يرجى محاولة كتابة التعليمات البرمجية بتنسيق xhtml، ويؤثر DOCTYPE على معالجة CSS كمعيار W3C، يجب إضافة عبارة DOCTYPE.
نصائح CSS
1. مشكلة التمركز العمودي لـ div
Vertical-align:middle; قم بزيادة تباعد الأسطر إلى نفس ارتفاع سطر DIV بالكامل: 200px; العيب هو أنك تحتاج إلى التحكم في المحتوى وعدم لفه في سطر آخر.
2. مشكلة مضاعفة الهامش
سيتم مضاعفة الهامش المعين لمجموعة div العائمة ضمن IE. هذا خطأ موجود في IE6. الحل هو إضافة العرض:مضمن داخل هذا القسم.
على سبيل المثال:
<#div id=”imfloat”>
المغلق المقابل هو
#عائمة{
تعويم: يسار؛
هامش:5px;/*في IE، يُفهم على أنه 10px*/
Display:inline;/*في IE، سيتم فهمه على أنه 5px* /}
3. المسافة المزدوجة الناتجة عن العائمة
#box{ float:left width:100px; هامش:0 0 0 100px; // في هذه الحالة، سيقوم IE بإنشاء مسافة 200 بكسل Display:inline;
لنتحدث عن عنصري الكتلة والمضمنة بالتفصيل: خاصية عنصر الكتلة هي أنها تبدأ دائمًا بسطر جديد، ويمكن التحكم في الارتفاع والعرض وارتفاع الخط والهوامش (خاصية الكتلة)؛ العنصر المضمن هو أن العناصر الأخرى موجودة على نفس السطر ولا يمكن التحكم فيها (العناصر المضمنة) ؛
#box{ Display:block; // يمكنك محاكاة العناصر المضمنة كعناصر كتلة Display:inline; // تحقيق تأثير الترتيب في نفس الصف diplay:table;
4 مشاكل IE مع العرض والارتفاع
لا يتعرف IE على تعريف min-، ولكنه في الواقع يتعامل مع العرض والارتفاع الطبيعي كما لو كان هناك min. هذه مشكلة كبيرة. إذا كنت تستخدم العرض والارتفاع فقط، فلن تتغير هاتان القيمتان في المتصفح العادي. إذا كنت تستخدم min-width وmin-height فقط، فلن يتم تعيين العرض والارتفاع على الإطلاق تحت آي إي.
على سبيل المثال، إذا كنت تريد تعيين صورة خلفية، فإن هذا العرض أكثر أهمية. لحل هذه المشكلة، يمكنك القيام بما يلي:
#box{ العرض: 80 بكسل؛ الارتفاع: 35 بكسل؛} html> الجسم #box { العرض: الارتفاع التلقائي: الحد الأدنى للعرض: 80 بكسل؛}
5. الحد الأدنى لعرض الصفحة
min-width هو أمر CSS مناسب جدًا، حيث يمكنه تحديد أن الحد الأدنى لعرض العنصر لا يمكن أن يكون أصغر من عرض معين، بحيث يكون التخطيط صحيحًا دائمًا. لكن IE لا يتعرف على هذا، ويتعامل مع العرض باعتباره الحد الأدنى للعرض. من أجل جعل هذا الأمر متاحًا أيضًا على IE، يمكنك وضع <div> أسفل علامة <body>، ثم تحديد فئة لـ div، ثم تصميم CSS مثل هذا:
#container{ min-width: 600px width:expression(document.body.clientWidth < 600? "600px": "auto" );}
الحد الأدنى للعرض الأول طبيعي، لكن العرض في السطر الثاني يستخدم جافا سكريبت، والذي لا يتعرف عليه إلا IE، مما سيجعل مستند HTML الخاص بك أقل رسمية. إنه في الواقع يطبق الحد الأدنى للعرض من خلال حكم جافا سكريبت.