غالبًا ما تكون هناك العديد من مشكلات عدم التوافق بين IE وFF في تخطيط صفحة الويب بتنسيق CSS، وإليك بعض الاحتمالات الشائعة وحلولها!
1. استخدم !important لحل اختلافات التخطيط بين IE وMozilla !important هو بناء جملة محدد في CSS1، وتتمثل وظيفته في زيادة أولوية التطبيق لقواعد النمط المحددة. والنقطة الأكثر أهمية هي أن IE لم يدعم بناء الجملة هذا مطلقًا، لكن المتصفحات الأخرى تفعل ذلك. لذلك، يمكننا استخدام هذا لتحديد أنماط مختلفة لـ IE والمتصفحات الأخرى. على سبيل المثال، نحدد نمطًا مثل هذا:
مثال لكود المصدر
[www.downcodes.com] .اختبار الألوان{
الحدود:20pxsolid#60A179!هام؛
الحدود:20pxsolid#00F;
الحشو: 30 بكسل؛
العرض: 300 بكسل؛
}
عند التصفح في Mozilla، يمكنه فهم أولوية !important، لذلك يتم عرض اللون #60A179؛ عند التصفح في IE، لا يمكنه فهم أولوية !important، لذلك يتم عرض اللون #00F.
2. حل مشكلة عدم ظهور نمط التمرير بعد الوصول إلى الارتباط التشعبي. تغيير ترتيب خصائص CSS: يجب أن يكون معيار الترتيب:
أ:رابط - أ: تمت الزيارة - أ: تحوم - أ: نشط
3. كيفية عرض المحتوى في Li مع علامات الحذف بعد تجاوز طوله مثال لكود المصدر
[www.downcodes.com] الهامش: 3 بكسل - يعني أن جميع الجوانب 3 بكسل؛
الهامش: 3px 5px - يعني أن قيمة الأعلى والأسفل هي 3px، وقيمة اليمين واليسار هي 5px
الهامش: 3px 5px 7px —— يشير إلى أن قيمة الجزء العلوي هي 3، وقيمة اليمين واليسار هي 5، وقيمة الأسفل هي 7
الهامش: 3px 5px 7px 5px - تمثل القيم الأربع الأعلى واليمين والأسفل واليسار؛
5. قم بحل مشكلة عدم تمكن IE من عرض PNG الشفافة بشكل صحيح - أضف الكود في الرأس مثال لكود المصدر
[www.downcodes.com] <لغة البرمجة = "جافا سكريبت">
الدالة صحيحةPNG()
{
for(var i=0; i {
فار img = document.images[i]
فار imgName = img.src.toUpperCase()
إذا (imgName.substring(imgName. length-3, imgName. length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
إذا (img.align == "left") imgStyle = "float:left;" + imgStyle
إذا (img.align == "right") imgStyle = "float:right;"
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = " + "style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "عامل التصفية:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='scale');">"
img.outerHTML = strNewHTML
ط = ط-1
}
}
}
window.attachEvent("onload", CorrectPNG);
الاستخدام (الحشوة:0؛ الهامش:0؛ نمط القائمة: بالداخل؛)
أو (الحشوة:0؛ الهامش:0؛ نمط القائمة: لا شيء؛) لتحقيق التوافق
7. حل اختلاف 2px في تفسير نموذج BOX في Firefox و IE مثال لكود المصدر
[www.downcodes.com] شعبة {
الهامش: 30 بكسل! مهم؛
الهامش: 28 بكسل؛
}
لاحظ أنه لا يجب عكس ترتيب هذين الهامشين. وفقًا لما ورد أعلاه، لا يدعم IE المهم، لذلك يتم تفسيره فعليًا على هذا النحو ضمن IE:
مثال لكود المصدر
[www.downcodes.com] شعبة {
التزيين: 30 بكسل؛
الهامش: 28 بكسل
}
إذا كانت هناك تعريفات متكررة، فسيتم تنفيذ التعريف الأخير، لذلك لا يمكنك كتابة الهامش:XXpx!important؛
8. التأثير الافتراضي للهامش يتم توسيط المحتوى الموجود في div افتراضيًا في IE، ويتم محاذاته إلى اليسار في FF افتراضيًا. طريقة توسيط المحتوى ff هي إضافة هامش الكود:auto;
