1. CSS HACK
يمكن للطريقتين التاليتين حل جميع عمليات HACK تقريبًا اليوم
1. !important
مع دعم IE7 لـ !important، أصبحت الطريقة !important الآن مخصصة فقط لـ HACK الخاص بـ IE6 (انتبه إلى الكتابة. تذكر أن موضع الإعلان يحتاج إلى لتكون مقدمًا.)
2. IE6/IE77 لـ FireFox
*+html و*html عبارة عن علامات خاصة بـ IE، وهي غير مدعومة. بواسطة Firefox حتى الآن، و*+html هي علامة فريدة لـ IE7.
ملاحظة:
*+html HACK لـ IE7 يجب التأكد من وجود العبارة التالية في أعلى HTML:
http://www.w3.org/TR/html4/loose.dtd ">
2. إغلاق التعويم العالمي.
للتعرف على مبدأ التعويم الواضح، يرجى الرجوع إلى [كيفية مسح العوامات بدون علامات هيكلية].
أضف الكود التالي إلى
CSSالشامل
وأضف class = "clearfix" إلى القسم الذي يجب إغلاقه وهو يعمل في كل مرة
.clearfix
:
after
{
content
:
"
.
"
;
.مسح الإصلاح {عرض:كتلة؛}
3. نصائح التوافق الأخرى
1. سيؤدي ضبط الحشو على div ضمن FF إلى زيادة العرض والارتفاع، لكن IE لن يفعل ذلك (يمكن حله باستخدام !مهم)
2. توسيط المشكلة
عموديًا line- يتم ضبط الارتفاع على نفس ارتفاع div الحالي، ثم يتم محاذاة عموديًا: وسط (احرص على عدم تغليف المحتوى.)
2). قم بتوسيطه أفقيًا: 0 تلقائيًا؛ ليس كليًا)
3. إذا كنت بحاجة إلى إضافة محتوى في العلامة للنمط العلوي، فأنت بحاجة إلى ضبط العرض: block؛ (شائع في علامات التنقل)
4. يؤدي الاختلاف في فهم BOX بين FF وIE إلى 2 بكسل. الاختلاف والمشاكل مثل تعيين هامش div على IE
5. علامة ul موجودة في FF، هناك نمط قائمة وحشو افتراضيًا أدناه. شائع في علامات التنقل وقوائم المحتوى)
6. لا تقم بتعيين ارتفاع div كغلاف خارجي، فمن الأفضل إضافة تجاوز السعة: مخفي. لتحقيق درجة عالية من القدرة على التكيف
7. حول المؤشر اليدوي واليد تنطبق فقط على IE.1.
معظم أنماط CSS الخاصة بـ Firefox ie6 وie7
تم اختراقها الآن باستخدام !important، بالنسبة لاختبارات ie6 وfirefox، يمكن أن تكون عرضًا عاديًا،
ولكن يمكن لـ ie7 تفسيرها بشكل صحيح سيؤدي إلى عدم عرض الصفحة بالشكل المطلوب! لقد وجدت اختراقًا جيدًا
لـ
IE7 باستخدام "*+html". الآن قم بتصفحه باستخدام IE7 ولن تكون هناك مشكلة.الآن اكتب CSS مثل هذا:
#1 { color: #333; }
* html #1 { color: #666 }
*+html #1 { color: #999 }
ثم يتم عرض لون الخط على أنه #333 في فايرفوكس لون الخط هو #666 ضمن IE6 و#999 ضمن IE7.
2تعريف النمط الرئيسي
لتوسيط المشكلات في تخطيط CSS
هو كما يلي:body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto }
الوصف:
قم أولاً بتعريف TEXT-ALIGN على الأصل العنصر: center؛ وهذا يعني أن المحتوى الموجود داخل العنصر الأصلي يتم توسيطه؛ وهذا الإعداد كافٍ لـ IE.
لكن لا يمكن توسيطها في موزيلا. الحل هو إضافة "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" عند تعيين العنصر الفرعي.
تجدر الإشارة إلى أنه إذا كنت تريد استخدام هذه الطريقة لتوسيط الصفحة بأكملها، فمن المستحسن عدم تعيينها في DIV، يمكنك تقسيم عدة div بالتسلسل،
ما عليك سوى تحديد MARGIN-RIGHT: auto;MARGIN-LEFT: auto في كل div منقسم.
3 تفسيرات مختلفة لنموذج الصندوق
#box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width: 600px; // for ff+ie6.0 width :500px; // for ie6.0-}
4 المسافة المزدوجة الناتجة عن العائمة
#box{ width:100px هامش:0 0 100px; في ظل هذه الظروف، سينشئ IE مسافة 200 بكسل Display:inline; // Ignore float} لنتحدث
عن عنصري الكتلة والمضمّنين بالتفصيل، وخصائص عنصر Block هي: البدء دائمًا بسطر جديد، الارتفاع
، العرض، ارتفاع الخط،
يمكن التحكم في الهوامش (عناصر الكتلة)؛
/ يمكن محاكاة العناصر المضمنة كعنصر كتلة العرض: مضمن؛ // تحقيق تأثير الترتيب في نفس الصف diplay:table؛
IE لا يتعرف على تعريف min-، ولكنه في الواقع يعامل العرض والارتفاع الطبيعي كما لو كان هناك دقيقة. هذه مشكلة كبيرة. إذا كنت تستخدم العرض والارتفاع فقط،
فلن تتغير هاتان القيمتان في المتصفح العادي. إذا كنت تستخدم min-width وmin-height فقط، فلن يتم تعيين العرض والارتفاع على الإطلاق تحت آي إي.
على سبيل المثال، إذا كنت تريد تعيين صورة خلفية، فإن هذا العرض أكثر أهمية. لحل هذه المشكلة، يمكنك القيام بذلك:
#box{width
: 80px; height: 35px;}html>body #box{ width: auto; height: min-width: 80px;
الحد الأدنى للعرض للصفحات
هو أمر CSS مناسب جدًا، حيث يمكنه تحديد أن الحد الأدنى لعرض العنصر لا يمكن أن يكون أقل من عرض معين، وذلك لضمان صحة التخطيط دائمًا. لكن IE لا يتعرف على هذا،
ويتعامل مع العرض باعتباره الحد الأدنى للعرض. لكي يعمل هذا الأمر على IE، يمكنك وضع
ثم قم بتصميم CSS مثل هذا:
#container{ min-width: 600px width; :expression (document.body.clientWidth < 600? "600px": "auto" );}
الحد الأدنى للعرض الأول طبيعي؛ لكن العرض في السطر 2 يستخدم Javascript، والذي لا يتعرف عليه سوى IE، والذي سيفيدك أيضًا مستند HTML ليس رسميًا جدًا. إنه في الواقع ينفذ الحد الأدنى للعرض من خلال حكم Javascript.
ويمكن أيضًا كتابتها مباشرة على النحو التالي:
#container{ الحد الأدنى للعرض: 600 بكسل؛}
بهذه الطريقة، الحد الأدنى للعرض هو 600 بكسل بغض النظر عن IE أو FF.
7 امسح العائمة
.hackbox{ Display:table; // عرض الكائن كجدول على مستوى عنصر الكتلة} أو .hackbox{ Clear:both;}
أو أضفه : بعد (كائن زائف)، يعين المحتوى الذي يحدث بعد الكائن، ويستخدم عادةً مع المحتوى. لا يدعم IE هذا الكائن الزائف ولا تدعمه متصفحات Ie،
لذلك لا يؤثر على متصفحات IE/WIN. الشيء الأكثر إزعاجًا في هذا ... #box:after{ content: "."; العرض: block height: 0; واضح: كلاهما; الرؤية: مخفي;}
8 نص IE عائم ينتج 3 بكسلات
يكون جانبالخطأ
عائمًا، ويتم وضع الجانب الأيمن باستخدام الهامش الأيسر للتصحيح الخارجي، وسيكون النص الموجود في الكائن الأيمن بعيدًا عن الجانب الأيسر بمقدار 3 بكسل
. left{ float:left width:50%;}#right{ width:50%;}*html #left{ Margin-right:-3px; // هذه الجملة هي المفتاح}
كود HTML
9 محدد السمات (لا يمكن اعتبار هذا متوافقًا، فهو خطأ في إخفاء CSS)
p[id ]{}div[id]{}
هذا مخصص لـ IE6.0 والإصدارات الأقل من IE6.0 مخفية.
لا يزال هناك اختلاف بين محددات السمات والمحددات الفرعية في FF وOPera في حين أن نطاق محددات السمات كبير نسبيًا، مثل p في [id]، فإن جميع علامات p ذات المعرفات لها نفس النمط.
10 مشكلة الإخفاء والبحث في IE
عندما يكون تطبيق div معقدًا، توجد بعض الروابط في كل عمود، مثل DIV، تحدث مشكلة الإخفاء بسهولة في هذا الوقت.
لا يمكن عرض بعض المحتوى. عندما يحدد الماوس هذه المنطقة، يتبين أن المحتوى موجود بالفعل في الصفحة.
الحل: استخدم سمة ارتفاع الخط لـ #layout أو استخدم ارتفاعًا وعرضًا ثابتين لـ #layout. حافظ على بنية الصفحة بسيطة قدر الإمكان.
11 الارتفاع غير التكيفي
يعني الارتفاع غير التكيفي أنه لا يمكن ضبط ارتفاع الطبقة الخارجية تلقائيًا عندما يتغير ارتفاع كائن الطبقة الداخلية، خاصة عندما يستخدم كائن الطبقة الداخلية
الهامش أو الحشو.
مثال:
المحتوى في كائن p
CSS: #box {background-color:#eee }
#box p {margin-top: 20px;margin - Bottom: 20px; text-align:center; }
الحل: أضف كائنين div فارغين أعلى وأسفل كائن P: .1{height:0px;overflow:hidden;} أو أضف سمة الحدود إلى DIV.
والأسلوب التالي هو أسلوب تحليل من زاوية أخرى:
تم تجميع طرق التعامل مع أخطاء المتصفح (جزء) للأصدقاء الذين يحبون تصميم الويب للمشاركة:
1. النجمة*
يمكن لـ IE التعرف على *، لكن المتصفحات القياسية مثل FF لا يمكنها التعرف على *.
مثال: ع { اللون: أصفر * اللون: أحمر؛}
مماثلة هي
+ علامة زائد
يشرح فقط IE
ع {اللون: أحمر + اللون: أزرق}
يعرض IE اللون الأزرق ويعرض FF اللون الأحمر
2.!مهم
سيتجاهل IE6 والإصدارات الأقدم هذا النمط، وسيدعمه IE7 FF؛
ع {اللون: أحمر! مهم؛ اللون: أصفر؛}
سيظهر IE7 FF باللون الأحمر IE6 باللون الأصفر
لاحظ هنا أن الطريقة المهمة يتم تجاهلها فقط بواسطة IE6 والإصدارات الأقدم بعد اتباع التنسيق أعلاه ويمكن استخدام طرق أخرى لزيادة وزن النمط بشكل عام.
3. تسطير.
IE6 والإصدارات الأقدم سوف تستخدم هذا النمط، وسيتم تجاهل الآخرين.
ع {اللون: أحمر _ اللون: أزرق}
4. ملاحظات:
ع {اللون: أحمر}؛
يمكن تطبيق هذا النمط وعرضه في IE6، ولكن لن تتم معالجته في IE5 والإصدارات الأقل، لذا يمكن تمييزه في IE5/6
5. @استيراد:
استخدم عنوان URL في @IMPORT لاستيراد الأنماط. الاستخدام القياسي هو وضع القيمة في عنوان URL بين علامتي اقتباس، كما يلي: @IMPORT URL("newstyle.css"); وبالتالي يمكن دعم هذا الاستخدام بواسطة المتصفحات IE5 وما فوق وFF تحقيق تتم معالجة أنماط IE4 بشكل منفصل.
بالإضافة إلى ذلك، هناك طريقة أخرى:
@IMPORT URL("noie.css") الشاشة؛
الشاشة هي خيار يستخدم لتحديد نوع الجهاز، وتستخدم الشاشة لعرض الشاشة، وتستخدم الطباعة لطباعة عرض الجهاز، ومع ذلك، لا يدعم IE هذه الطريقة، ويمكن لجميع متصفحات IE التمييز بين IE وFF.
6. محدد السمات: يستخدم لتحديد الكائنات ذات سمات محددة
فترة [الفئة = اليسار] {اللون: أزرق}
فترة [العنوان] {اللون: أحمر؛}
IE6 لا يدعمه، ولكنه يعمل بشكل جيد في FF، لذا يمكن معالجة IE وFF بشكل منفصل.
في التطوير الفعلي، غالبًا ما يحتاج IE وFF إلى المعالجة بشكل منفصل. يمكنك استخدام الكود التالي:
#محتوى{
اللون: أحمر؛
}
[xmlnx] #المحتوى{
اللون: أزرق
}
أعتقد أن هذه الطريقة عملية للغاية ويتم استخدامها بشكل متكرر، أوصي بها للأصدقاء إذا كنت بحاجة إلى شرح أكثر تفصيلاً، يمكنني نشرها مرة أخرى.
7. محدد الكائن الفرعي:
تمتد> ع {اللون: أحمر}
IE6 غير مدعوم أيضًا، ويمكن استخدامه أيضًا للتمييز بين IE وFF.
8. طريقة تانتيك
#محتوى{
اللون: أزرق؛
عائلة الصوت:""}"";
عائلة الصوت: وراثة؛
اللون: أحمر؛
}
بعد استخدام voice-family في الكود أعلاه، لن يتم تحليل اللون التالي: red بواسطة المتصفحات IE5.5 وما دونه، لذلك، سيظهر لون النص باللون الأحمر على IE6/7/FF، وعلى IE5.5 وما دونه سيظهر باللون الأزرق على المتصفح؛
بالإضافة إلى ذلك، هناك طريقة أخرى للتعامل مع العائلة الصوتية:
#محتوى{
اللون: أحمر؛
عائلة الصوت :"}"
عائلة الصوت: وراثة؛
اللون: أزرق؛
}
باستخدام هذه الطريقة، سيظهر النص في IE6 والمتصفحات أدناه ومتصفح FF باللون الأحمر، بينما سيظهر النص في IE5 والمتصفحات أدناه باللون الأزرق!
9. سمات الهروب
ص {ثidth:200px؛}
سيتم تجاهل IE5.5 وما دونه. ملاحظة: لا يمكن أن يظهر حرف الخط المائل العكسي قبل 0-9 أو الحرف af
10. التعليقات الشرطية في IE 1. مقدمة للتعليقات الشرطية
تتمتع التعليقات الشرطية في IE بقدرة ممتازة على التمييز بين إصدارات IE وإصدارات IE وغير IE، وتستخدم بشكل شائع في تصميم الويب.
طريقة الاختراق.
لا يمكن استخدام التعليقات الشرطية إلا في IE5 وما فوق.
إذا كان لديك عدة IEs مثبتة، فستعتمد التعليقات المشروطة على الإصدار الأعلى من IE.
البنية الأساسية للتعليقات الشرطية هي نفس تعليقات HTML (). ولذلك فإن المتصفحات الأخرى غير IE سوف تتعامل معها كتعليقات عادية وتتجاهلها تمامًا.
سيستخدم IE شرط if لتحديد ما إذا كان سيتم تحليل المحتوى الموجود في التعليق الشرطي مثل محتوى الصفحة العادي.
2. سمات الشرح المشروط
gt: أكبر من، حدد الإصدار المشروط أو أعلى، باستثناء الإصدار المشروط
lt: أقل من، حدد الإصدار الموجود أسفل الإصدار المشروط، باستثناء الإصدار المشروط
gte: أكبر من أو يساوي، حدد النسخة المشروطة أو أعلى، بما في ذلك النسخة المشروطة
lte: أقل من أو يساوي، حدد الإصدار الموجود أسفل الإصدار المشروط، بما في ذلك الإصدار المشروط
: حدد كافة الإصدارات باستثناء الإصدار الشرطي، بغض النظر عن كيفية استخدام التعليقات الشرطية
انتبه إلى استبدال <> في الكود بالعلامة المقابلة أكبر من أو أقل من في اللغة الإنجليزية.
التعليمة البرمجية التالية عبارة عن تعليق شرطي يتم تشغيله ضمن متصفحات غير IE
أنت لا تستخدم Internet Explorer
أنت تستخدم Internet Explorer الإصدار 6 أو متصفح غير IE