تجميع نصائح توافق CSS لمتصفحات IE وFirefox

الكاتب：Eve Cole وقت التحديث：2025-01-02 18:00:01

نصائح عامة حول توافق CSS

الرجاء محاولة كتابة التعليمات البرمجية بتنسيق xhtml، ويؤثر DOCTYPE على معالجة CSS كمعيار W3C، يجب إضافة عبارة DOCTYPE.

1. مشكلة التمركز العمودي لـ div

Vertical-align:middle; قم بزيادة تباعد الأسطر إلى نفس ارتفاع سطر DIV بالكامل: 200px; العيب هو أنك تحتاج إلى التحكم في المحتوى وعدم لفه في سطر آخر.

2. مشكلة مضاعفة الهامش

سيتم مضاعفة الهامش المعين لمجموعة div العائمة ضمن IE. هذا خطأ موجود في IE6. الحل هو إضافة العرض:مضمن داخل هذا القسم.

على سبيل المثال:

<#div id=”imfloat”>
المغلق المقابل هو #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 الخاص بك أقل رسمية. إنه في الواقع ينفذ الحد الأدنى للعرض من خلال حكم Javascript.

6. ينتج عن نص IE العائم DIV خطأ بحجم 3 بكسل

يتم تعويم الكائن الموجود على اليسار، ويتم تحديد موضعه باستخدام الهامش الأيسر للتصحيح الخارجي، وسيتم تباعد النص الموجود داخل الكائن الموجود على اليمين بمقدار 3 بكسل من اليسار.

#box{ تعويم: يسار العرض: 800 بكسل؛}
#left{ float:left width:50%;}
#يمين{ العرض:50%;}
*html #left{ Margin-right:-3px;
<div معرف = "مربع">
<div id="left">＜/div>
<div id="right">＜/div>
</div>
http://www.devdao.com/
http://yuanma.devdao.com/
7.IE مشكلة الغميضة

عندما يكون تطبيق div معقدًا، توجد بعض الارتباطات في كل عمود، ويمكن أن تحدث مشكلات الإخفاء والبحث بسهولة في DIVs.

لا يمكن عرض بعض المحتوى. عندما يحدد الماوس هذه المنطقة، يتبين أن المحتوى موجود بالفعل في الصفحة. الحل: استخدم سمة ارتفاع الخط لـ #layout أو استخدم ارتفاعًا وعرضًا ثابتين لـ #layout. حافظ على بنية الصفحة بسيطة قدر الإمكان.

8. تعويم div مغلق؛ ارتفاع تكيفي واضح؛

①على سبيل المثال: ＜#div id=”floatA” . (تم ضبط خصائص floatA وfloatB على float:left;)

هذا الرمز يعمل بشكل جيد في IE، المشكلة في FF. والسبب هو أن NOTfloatC ليس تسمية عائمة، ويجب إغلاق التسمية العائمة. أضف <#div class=”clear”> بين <#div class=”floatB”> <#div class=”NOTfloatC”>. يجب أن ينتبه div هذا إلى موضعه، ويجب أن يحتوي على السمة float لا يمكن أن تكون هناك علاقة متداخلة بين divs على نفس المستوى، وإلا سيحدث استثناء. وحدد النمط الواضح كالتالي: .clear{ Clear:both;}

② لا تقم بتعيين ارتفاع div كغلاف خارجي للسماح بتكيف الارتفاع تلقائيًا، أضف تجاوزًا: مخفيًا في الغلاف، عندما يتم تضمين مربع عائم، فإن التكيف التلقائي للارتفاع غير صالح ضمن IE الوقت، يجب تشغيل IE السمة الخاصة للتخطيط (IE الشرير!) باستخدام Zoom:1;، وبالتالي تحقيق التوافق.
على سبيل المثال، يتم تعريف المجمع على النحو التالي:

.colwrapper{ التجاوز: مخفي؛ التكبير: 1؛ الهامش: 5 بكسل تلقائي؛}

③بالنسبة للتنضيد، من المحتمل أن يكون وصف CSS الذي نستخدمه كثيرًا هو float:left. نحتاج أحيانًا إلى إنشاء خلفية موحدة خلف float div في العمود n، على سبيل المثال:

على سبيل المثال، نريد تعيين خلفية الصفحة إلى اللون الأزرق بحيث يكون لون خلفية الأعمدة الثلاثة باللون الأزرق، ومع ذلك، سنجد أنه عندما يمتد الجانب الأيسر الأوسط إلى الأسفل، تحتفظ الصفحة فعليًا بنفس الارتفاع السبب هو أن الصفحة ليست سمة عائمة، ولا يمكن ضبط صفحتنا على أنها عائمة لأنها تحتاج إلى توسيطها، لذا يجب أن نحلها بهذه الطريقة.

الحل هو تضمين عنصر DIV الأيسر بعرض 100%.

④إغلاق عالمي للطفو (مهم جدًا!)

لمعرفة مبدأ التعويم الواضح، يرجى الرجوع إلى [كيفية مسح العوامات بدون ترميز هيكلي]. أضف الكود التالي إلى Global CSS وأضف class = "clearfix" إلى القسم الذي يجب إغلاقه في كل مرة.

/* إصلاح واضح */
.clearfix:after { content:"."; العرض: الارتفاع: 0; واضح: كلاهما;
.clearfix { العرض: كتلة مضمنة }
/* إخفاء من IE Mac */
.مسح الإصلاح {عرض:كتلة؛}
/* إنهاء الإخفاء من IE Mac */
/* نهاية الإصلاح */

أو قم بتعيينه على النحو التالي: .hackbox{ Display:table; // عرض الكائن كجدول على مستوى عنصر الكتلة}

9. لا يمكن تعديل الارتفاع

الارتفاع غير التكيفي يعني أن الارتفاع الخارجي لا يمكن ضبطه تلقائيًا عندما يتغير ارتفاع الكائن الداخلي، خاصة عندما يستخدم الكائن الداخلي هامشًا أو لوحة.

مثال:

#box {لون الخلفية: #eee }
#box p {margin-top: 20px;
<div معرف = "مربع">
<p>المحتويات الموجودة في الكائن p</p>
</div>

الحل: أضف كائنين div فارغين أعلى وأسفل رمز CSS: .1{height:0px;overflow:hidden;} أو أضف سمة الحدود إلى DIV.

10. لماذا توجد فجوات تحت الصور في IE6؟

هناك العديد من الأساليب لحل هذا الخطأ. يمكنك تغيير تخطيط HTML، أو ضبط الصورة على العرض:حظر أو ضبط سمة المحاذاة العمودية على المحاذاة الرأسية:الأعلى.

يمكن حل كل النص السفلي الأوسط السفلي.

11. كيفية محاذاة النص ومربع إدخال النص

إضافة محاذاة رأسية:وسط؛

<نمط النوع = "نص/CSS">

</نمط>

12. هل هناك فرق بين المعرف والفئة المحددة في معايير الويب؟

(1) لا تسمح معايير الويب بتكرار المعرفات. على سبيل المثال، لا يُسمح بتكرار div id="aa" مرتين، وتحدد الفئة فئة يمكن تكرارها نظريًا إلى ما لا نهاية، بحيث يمكن للتعريفات التي تتطلب مراجع متعددة أن تتكرر. يستخدم هو.

(2). أولوية مسألة السمات

المعرف له أولوية أعلى من الفئة، راجع المثال أعلاه

(3) إنه مناسب للبرامج النصية للعملاء مثل JS. إذا كنت تريد تنفيذ عمليات البرنامج النصي على كائن في الصفحة، فيمكنك تحديد معرف له، وإلا فلن تتمكن من العثور عليه إلا من خلال اجتياز عناصر الصفحة وتحديدها سمات محددة وهذا مضيعة للوقت والموارد نسبيًا، ولكنها أقل بساطة بكثير من المعرف.

13. نصائح لعرض المحتوى في LI بعلامات حذف بعد تجاوز طوله

تنطبق هذه التقنية على متصفحات IE وOP

<نمط النوع = "نص/CSS">
<!--
لي {
العرض: 200 بكسل؛
مسافة بيضاء:nowrap;
تجاوز النص: القطع الناقص؛
-o-text-overflow:ellipsis;
الفائض: مخفي؛
}

-->
</نمط>

14. لماذا لا يستطيع IE ضبط لون شريط التمرير وفقًا لمعايير الويب؟

الحل هو استبدال النص بـ html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<نمط النوع = "نص/CSS">

＜/نمط>

15. لماذا لا يمكنني تحديد حاوية يبلغ ارتفاعها حوالي 1 بكسل؟

سبب هذه المشكلة في IE6 هو ارتفاع الصف الافتراضي، وهناك العديد من تقنيات الحل، مثل:
الفائض: التكبير المخفي: 0.08 ارتفاع الخط: 1 بكسل

16. كيف يتم عرض الطبقة على الفلاش؟

الحل هو ضبط الشفافية لـ FLASH

17. كيفية توسيط الطبقة عموديًا في المتصفح

نستخدم هنا النسبة المئوية لتحديد الموضع المطلق، وتقنية استخدام القيم السالبة خارج الرقعة. حجم القيمة السالبة هو عرضها وارتفاعها مقسومًا على اثنين.

<نمط النوع = "نص/CSS">

</نمط>

نصائح حول توافق CSS لمتصفحي Firefox وIE

1. مشكلة توسيط القسم

يتم توسيط div بالفعل عند ضبط الهامش الأيسر والهامش الأيمن على الوضع التلقائي، وهذا لا يعمل مع IE. يحتاج إلى تعيين النص ليتم توسيطه يتم توسيط المحتوى الموجود داخل العنصر الأصلي.

2. حدود الرابط وخلفيته (علامة)

لإضافة حد ولون خلفية إلى رابط، تحتاج إلى ضبط العرض: كتلة وتعويم: لليسار لضمان عدم وجود فواصل أسطر. بالإشارة إلى شريط القوائم، فإن تعيين ارتفاع شريط القوائم وشريط القوائم هو لتجنب إزاحة شاشة عرض الحافة السفلية. إذا لم يتم ضبط الارتفاع، فيمكن إدراج مسافة في شريط القوائم.

3. مشكلة عدم ظهور نمط التمرير بعد الوصول إلى الارتباط التشعبي

نمط الارتباط التشعبي الذي تم النقر عليه وزيارته لم يعد نشطًا ولا بد أن العديد من الأشخاص واجهوا هذه المشكلة. الحل هو تغيير ترتيب سمات CSS: LVHA

شفرة:

<نمط النوع = "نص/CSS">

</نمط>

4. مؤشر إصبع المؤشر

المؤشر: يمكن للمؤشر عرض شكل إصبع المؤشر في IE FF في نفس الوقت، ولا يمكن عرض اليد إلا في IE

5.حشوة UL والهامش

تحتوي علامة ul على قيمة حشو افتراضيًا في FF، ولكن في IE فقط الهامش له قيمة افتراضيًا، لذا فإن تحديد ul{margin:0;padding:0;} أولاً يمكن أن يحل معظم المشكلات.

6. علامة النموذج

ستحتوي هذه التسمية تلقائيًا على بعض الهوامش في IE، بينما في FF يكون الهامش 0. لذلك، إذا كنت تريد عرضها بشكل متسق، فمن الأفضل تحديد الهامش والحشو في CSS ردًا على المشكلتين المذكورتين أعلاه، فإن ملف css In بشكل عام، يتم تعريف النمط ul,form{margin:0;padding:0;} أولاً، لذلك لن تضطر إلى القلق بشأن هذا لاحقًا.

7. مشكلة عدم الاتساق في تفسير نموذج BOX

تفسير نموذج BOX في FF وIE غير متناسق، مما يؤدي إلى اختلاف قدره 2 بكسل. الحل: div{margin:30px!important;margin:28px;} لاحظ أنه لا يمكن عكس ترتيب الهوامش في IE السمة، ولكن لا يمكن للمتصفحات التعرف عليها. لذا، ضمن IE يتم تفسيره فعليًا على النحو التالي:

إذا تم تعريف div{maring:30px;margin:28px} بشكل متكرر، فسيتم تنفيذ الأخير، لذلك لا يمكنك كتابة هامش:xx px!important;#box{ width:600px; //for ie6.0- w العرض: 500 بكسل؛ // لـ ff+ie6.0}
#box{ العرض: 600 بكسل! مهم // لـ ff width: 600px; // لـ ff+ie6.0 width /**/:500px; // لـ ie6.0-}

8. محدد السمات (لا يمكن اعتبار هذا متوافقًا، فهو خطأ في إخفاء CSS)

ع[المعرف]{}div[id]{}

هذا مخفي بالنسبة لـ IE6.0 والإصدارات الأقل من IE6.0، ويعمل في FF وOpera. لا يزال هناك فرق بين محددات السمات والمحددات الفرعية. يتم تضييق نطاق المحددات الفرعية في الشكل، بينما يتم تضييق نطاق السمة المحددات كبيرة نسبيًا، مثل p[id]، وجميع علامات p ذات المعرف هي من نفس النمط.

9.الوسائل الأكثر قسوة -!مهم

إذا لم تكن هناك طريقة لحل بعض المشكلات التفصيلية، فيمكنك استخدام هذه التقنية، وسيقوم FF بتحليل "!مهم" تلقائيًا أولاً، لكن IE سيتجاهلها على النحو التالي

.tabd1{
الخلفية:url(/res/images/up/tab1.gif) بدون تكرار 0px 0px !مهم /*نمط FF*/
الخلفية:url(/res/images/up/tab1.gif) بدون تكرار 1px 0px;

ومن الجدير بالذكر أنه يجب وضع جملة xxxx !important فوق جملة أخرى.

10. مشكلة القيمة الافتراضية لـ IE وFF

ربما كنت تشكو من سبب اضطرارك إلى كتابة CSS مختلف خصيصًا لـ IE و FF، ولماذا يمثل IE صداعًا، ثم تلعن M$ اللعين أثناء كتابة CSS. في الواقع، IE، فيما يتعلق بدعم CSS القياسي، IE ليس سيئًا كما كنا نظن. المفتاح هو أن القيم الافتراضية لـ IE وFF مختلفة، وستجد أن كتابة CSS إن التوافق مع FF وIE ليس بالأمر الصعب، ربما بالنسبة لـ CSS البسيط، لا تحتاج إلى الشيء "!المهم" على الإطلاق.

نعلم جميعًا أنه عندما يعرض المتصفح صفحة ويب، فإنه سيقرر كيفية عرضها بناءً على ورقة أنماط CSS الخاصة بصفحة الويب، ولكن قد لا نقوم بالضرورة بوصف جميع العناصر الموجودة في ورقة الأنماط بالتفصيل، وبالطبع هناك ليست هناك حاجة للقيام بذلك، لذا بالنسبة لتلك الخصائص التي لم يتم وصفها، سيستخدم المتصفح الخصائص الافتراضية المضمنة طريقة العرض، مثل النص، إذا لم تحدد اللون في CSS، فسيستخدم المتصفح اللون الأسود أو لون النظام للعرض، وخلفية div أو عناصر أخرى، إذا لم يتم تحديدها في CSS، فسيقوم المتصفح بتعيينها أبيض أو شفاف، والأنماط الأخرى غير المحددة هي نفسها. لذلك، فإن السبب الأساسي وراء عرض العديد من الأشياء بشكل مختلف بين FF وIE هو أن شاشات العرض الافتراضية الخاصة بهما مختلفة. أما بالنسبة لكيفية عرض هذا النمط الافتراضي، فأنا أعرف ما إذا كانت هناك معايير مقابلة في w3 تنص عليه، لذلك لا يوجد. بحاجة للتعليق على هذه النقطة اللوم IE.

11. لماذا لا يستطيع النص الموجود في FF توسيع ارتفاع الحاوية؟

لن يتم تمديد الحاويات ذات قيم الارتفاع الثابتة في المتصفحات القياسية كما هو الحال في IE6، لذلك إذا كنت أرغب في الحصول على ارتفاع ثابت وتمدد، فما هي الإعدادات التي يجب علي القيام بها؟ الحل هو إزالة الارتفاع وضبط min-height:200px هنا، من أجل الاهتمام بـ IE6 الذي لا يعرف min-height، يمكن تعريفه على النحو التالي:

{
الارتفاع: تلقائي! مهم؛
الارتفاع: 200 بكسل؛
الحد الأدنى للارتفاع: 200 بكسل؛
}

12. كيفية جعل الحقول الطويلة المستمرة تلتف تلقائيًا في فايرفوكس

كما نعلم جميعًا، في IE، يمكنك استخدام Word-wrap:break-word مباشرة، وفي FF، نستخدم تقنية الإدراج JS لحل المشكلة.

<نمط النوع = "نص/CSS">

</نمط>

<div id="ff">آآآآآآآآآآآآآ</div>

<scrīpt type="text/javascrīpt">
/* <![CDATA[ */
وظيفة toBreakWord(el, intLen){
var ōbj=document.getElementById(el);
var strContent=obj.innerHTML;
فار strTemp = ""؛
بينما(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"
"؛
strContent=strContent.substr(intLen,strContent.length);
}
سترتيمب + = "
"+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord("ff", 37);
/* ]]> */
</script>

13. لماذا يختلف عرض الحاوية تحت IE6 عن تلك الموجودة في FF؟

الفرق في المشكلة هو ما إذا كان العرض الإجمالي للحاوية يتضمن عرض الحدود، هنا يفسره IE6 على أنه 200PX، بينما يفسره FF على أنه 220PX. إذن ما الذي يسبب المشكلة بالضبط؟ إذا قمت بإزالة ملف XML الموجود أعلى الحاوية، فستجد أن المشكلة الأصلية تكمن هنا. يؤدي ذلك إلى تشغيل وضع qurks الخاص بـ IE.

<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<نمط النوع = "نص/CSS">

</نمط>
<div ōnclick="alert(this.offsetWidth)">جعل FireFox متوافقًا مع IE</div>

هناك مشاكل جديدة تتعلق بدعم IE7.0 لـ CSS، والتي تم حلها على النحو التالي.

النوع الأول CSS HACK

Bpx; /*لـ IE7 وIE6*/
_الارتفاع: 20 بكسل؛ /*لـ IE6*/

انتبه إلى الطلب.

ما يلي هو أيضًا CSS HACK، ولكنه ليس بهذه البساطة كما هو مذكور أعلاه.

#مثال { اللون: #333 } /* موز */
* html #example { اللون: #666 } /* IE6 */
*+html #example { اللون: #999 } /* IE7 */

والثاني هو استخدام التعليقات الشرطية الخاصة بـ IE

<link rel="stylesheet" type="text/css" href="css.css" />

<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

الطريقة الثالثة هي طريقة تصفية CSS وفيما يلي مترجم من المواقع الأجنبية.

قم بإنشاء نمط CSS جديد كما يلي:

#غرض {
العرض: 200 بكسل؛
الارتفاع: 200 بكسل؛
الخلفية: أحمر؛
}

قم بإنشاء div جديد واستخدم نمط CSS المحدد مسبقًا:

أضف سمة lang هنا إلى أداء الجسم، الصيني هو zh:

الآن حدد نمطًا آخر لعنصر div:

*:lang(ar) #item{
الخلفية: أخضر! مهم؛
}

يتم ذلك لاستبدال نمط CSS الأصلي بـ !important نظرًا لأن محدد lang غير مدعوم في IE7.0، فلن يكون له أي تأثير على هذه الجملة، لذلك يتم تحقيق نفس التأثير في IE6.0، ولكنه الأمر صعب للغاية، ولسوء الحظ، لا يدعم Safari أيضًا هذه السمة، لذا تحتاج إلى إضافة نمط CSS التالي:

#العنصر:فارغ {
الخلفية: أخضر! مهم
}

المحدد:empty هو إحدى مواصفات CSS3، على الرغم من أن Safari لا يدعم هذه المواصفات، إلا أنه سيتم تحديد هذا العنصر بغض النظر عما إذا كان هذا العنصر موجودًا أم لا، فسيظهر اللون الأخضر الآن على المتصفحات الأخرى غير إصدارات IE.

بالنسبة للتوافق مع IE6 وFF، يمكنك اعتبار الخيار السابق مهمًا. شخصيًا أفضل الخيار الأول، وهو بسيط ويتمتع بتوافق أفضل.