الموضوع الذي نناقشه هو تخطيط صفحة الويب بتنسيق CSS. المشكلة الأكثر إزعاجًا للجميع هي توافق المتصفح. على الرغم من أن موقع 52CSS.com قد قدم الكثير من المعرفة في هذا الاتجاه، إلا أنه لا يزال يجعل العديد من المطورين في حيرة من أمرهم -ثلاثة اختلافات بين JavaScript وJavaScript في IE وFirefox وآمل أن تكون مفيدة للتعلم للجميع.
1. مشكلة document.formName.item("itemName"). وصف المشكلة: ضمن IE، يمكنك استخدام document.formName.item("itemName") أو document.formName.elements ["elementName"] ضمن Firefox، يمكنك فقط استخدام document.formName.elements["elementName"]؛ .
الحل: استخدم document.formName.elements["elementName"] بشكل موحد.
2. مشاكل مع كائنات المجموعة <br /> وصف المشكلة: ضمن IE، يمكنك استخدام () أو [] للحصول على كائنات المجموعة؛ ضمن Firefox، يمكنك فقط استخدام [ ] للحصول على كائنات المجموعة.
الحل: استخدم [] بشكل موحد للحصول على كائنات فئة المجموعة.
3. مشكلة السمات المخصصة <br /> وصف المشكلة: ضمن IE، يمكنك استخدام طريقة الحصول على السمات العادية للحصول على السمات المخصصة، أو يمكنك استخدام getAttribute() للحصول على السمات المخصصة في Firefox، ويمكنك فقط استخدام getAttribute(; ) للحصول عليها.
الحل: الحصول على السمات المخصصة بشكل موحد من خلال getAttribute().
4. مشكلة eval("idName") <br /> وصف المشكلة: ضمن IE، يمكنك استخدام eval("idName") أو getElementById("idName") للحصول على كائن HTML بالمعرف idName، ويمكنك ذلك استخدم فقط getElementById ("idName") للحصول على كائن HTML بالمعرف idName.
الحل: استخدم getElementById("idName") بشكل موحد للحصول على كائن HTML الذي يكون معرفه idName.
5. مشكلة أن اسم المتغير هو نفس معرف كائن HTML <br /> وصف المشكلة: ضمن IE، يمكن استخدام معرف كائن HTML مباشرة كاسم متغير للكائن الثانوي للمستند، ولكن ليس ضمن Firefox؛ ضمن Firefox، يمكن استخدامه مع كائن HTML. لا يمكن استخدام أسماء المتغيرات التي لها نفس المعرف ضمن IE.
الحل البديل: استخدم document.getElementById("idName") بدلاً من document.idName. من الأفضل عدم استخدام أسماء المتغيرات بنفس معرف كائن HTML لتقليل الأخطاء؛ عند الإعلان عن المتغيرات، قم دائمًا بإضافة الكلمة الأساسية var لتجنب الغموض.
6. مشكلة Const <br /> وصف المشكلة: ضمن Firefox، يمكنك استخدام الكلمة الأساسية const أو الكلمة الأساسية var لتحديد الثوابت؛ ضمن IE، يمكنك فقط استخدام الكلمة الأساسية var لتحديد الثوابت.
الحل: استخدم الكلمة الأساسية var بشكل موحد لتحديد الثوابت.
7. مشكلة في سمة input.type <br /> وصف المشكلة: سمة input.type ضمن IE للقراءة فقط؛ ولكن سمة input.type ضمن Firefox هي للقراءة والكتابة.
الحل: لا تقم بتعديل سمة input.type. إذا كان يجب عليك تعديله، فيمكنك إخفاء الإدخال الأصلي أولاً، ثم إدراج عنصر إدخال جديد في نفس الموضع.
8. مشكلة Window.event <br /> وصف المشكلة: يمكن تشغيل window.event فقط ضمن IE، ولكن ليس ضمن Firefox. وذلك لأنه لا يمكن استخدام حدث Firefox إلا في مكان وقوع الحدث.
الحل: أضف معلمة الحدث إلى الوظيفة التي وقع فيها الحدث، واستخدم var myEvent = evt?evt:(window.event?window.event:null) في نص الوظيفة (بافتراض أن المعلمة الرسمية هي evt)
مثال:
مثال لكود المصدر [www.downcodes.com] <نوع الإدخال = "زر" onclick = "doSomething (الحدث)"/>
<لغة البرمجة = "جافا سكريبت">
وظيفة افعل شيئا (ايفت) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}
الحل: var myX =event.x ?event.x :event.pageX;
إذا فكرت في السؤال 8، فما عليك سوى استخدام myEvent بدلاً من الحدث.
10. مشكلة Event.srcElement <br /> وصف المشكلة: في IE، يحتوي الكائن الزوجي على سمة srcElement، ولكن لا توجد سمة مستهدفة؛ وفي Firefox، يكون الكائن الزوجي لديه سمة الهدف، ولكن لا توجد سمة srcElement.
الحل: استخدم srcObj = events.srcElement؟
إذا فكرت في السؤال 8، فما عليك سوى استخدام myEvent بدلاً من الحدث.
11. مشكلة Window.location.href <br /> وصف المشكلة: ضمن IE أو Firefox2.0.x، يمكنك استخدام window.location أو window.location.href ضمن Firefox1.5.x، ويمكنك فقط استخدام window. موقع .
الحل البديل: استخدم window.location بدلاً من window.location.href. بالطبع، يمكنك أيضًا التفكير في استخدام التابع location.replace() .
12. مشكلات النوافذ المشروطة وغير المشروطة <br /> وصف المشكلة: ضمن IE، يمكن فتح النوافذ المشروطة وغير المشروطة من خلال showModalDialog وshowModelessDialog ضمن Firefox، ولا يمكن القيام بذلك.
الحل: استخدم window.open(pageURL,name,parameters) مباشرة لفتح نافذة جديدة.
إذا كنت بحاجة إلى تمرير المعلمات في النافذة الفرعية مرة أخرى إلى النافذة الأصلية، فيمكنك استخدام window.opener في النافذة الفرعية للوصول إلى النافذة الرئيسية. إذا كنت بحاجة إلى النافذة الرئيسية للتحكم في النافذة الفرعية، فاستخدم var subWindow = window.open(pageURL,name,parameters);
13. مشكلات الإطار وiframe <br /> خذ الإطار التالي كمثال:
<frame src="http://www.downcodes.com/123.html" id="frameId" name="frameName" />
(1) الوصول إلى كائن الإطار IE: استخدم window.frameId أو window.frameName للوصول إلى كائن الإطار؛
Firefox: استخدم window.frameName للوصول إلى كائن الإطار هذا؛
الحل: استخدم window.document.getElementById("frameId") بشكل موحد للوصول إلى كائن الإطار هذا؛
(2) لتبديل محتوى الإطار، يمكنك استخدام window.document.getElementById("frameId").src = "52css.com.html" أو window.frameName.location = "52css.com.html" في كل من IE وFirefox محتوى الإطار .
إذا كنت بحاجة إلى تمرير المعلمات الموجودة في الإطار مرة أخرى إلى النافذة الأصلية، فيمكنك استخدام الكلمة الأساسية الأصلية في الإطار للوصول إلى النافذة الرئيسية.
14. مشكلة تحميل الجسم <br /> وصف المشكلة: كائن الجسم في Firefox موجود قبل أن يقرأ المتصفح علامة الجسم بالكامل؛ بينما يجب تحميل كائن الجسم في IE بعد قراءة علامة الجسم بالكامل بواسطة المتصفح.
[ملاحظة] لم يتم التحقق من هذه المشكلة فعليًا وسيتم تعديلها بعد التحقق.
[ملاحظة] تم التحقق من أن المشكلة المذكورة أعلاه غير موجودة في IE6 وOpera9 وFireFox2. يمكن لبرنامج نصي JS بسيط الوصول إلى جميع الكائنات والعناصر التي تم تحميلها قبل البرنامج النصي، حتى لو لم يتم تحميل العنصر بعد.
15. طريقة تفويض الحدث <br /> وصف المشكلة: في IE، استخدم document.body.onload = inject؛ حيث تم تنفيذ الدالة inject() من قبل؛ في Firefox، استخدم document.body.onload = inject();
الحل: استخدم document.body.onload=new Function('inject()'); أو document.body.onload = function(){/* هذا هو الرمز */
[ملاحظة] الفرق بين الوظيفة والوظيفة
16. الاختلافات في العناصر الأصلية التي تم الوصول إليها <br /> وصف المشكلة: ضمن IE، استخدم obj.parentElement أو obj.parentNode للوصول إلى العقدة الأصلية لـ obj؛ وفي Firefox، استخدم obj.parentNode للوصول إلى العقدة الأصلية لـ obj.
الحل: نظرًا لأن كلاً من Firefox وIE يدعمان DOM، يتم استخدام obj.parentNode للوصول إلى العقدة الأصلية لـ obj.
17. المؤشر: اليد مقابل المؤشر: المؤشر
وصف المشكلة: لا يدعم Firefox اليد، لكن IE يدعم المؤشر.
الحل: استخدم المؤشر بشكل موحد.
18. مشاكل مع النص الداخلي.
وصف المشكلة: يعمل النص الداخلي بشكل طبيعي في IE، لكن النص الداخلي لا يعمل في FireFox.
الحل: استخدم textContent بدلاً من InternalText في المتصفحات غير التابعة لـ IE.
مثال:
مثال لكود المصدر [www.downcodes.com] إذا (navigator.appName.indexOf("المستكشف") >-1){
document.getElementById('element').innerText = "النص الخاص بي";
} آخر{
document.getElementById('element').textContent = "النص الخاص بي";
}
19. مشكلة تعيين عرض وارتفاع الكائن <br /> وصف المشكلة: البيانات المشابهة لـ obj.style.height = imgObj.height في FireFox غير صالحة.
الحل: استخدم obj.style.height = imgObj.height + 'px' بشكل موحد.
20. مشكلات تشغيل الجدول <br /> وصف المشكلة: لدى IE وFirefox والمتصفحات الأخرى عمليات مختلفة على علامة الجدول في IE، لا يُسمح بتعيين جدول HTML الداخلي وtr طريقة appendChild لا تعمل أيضًا.
حل:
مثال لكود المصدر [www.downcodes.com] // إلحاق صف فارغ بالجدول:
صف فار = otable.insertRow(-1);
فار الخلية = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
Row.appendChild(cell);
21. مشكلة المسافة البادئة لقوائم ul وol <br /> عند إزالة المسافة البادئة لقوائم ul وol والقوائم الأخرى، يجب كتابة النمط على النحو التالي: list-style:none;margin:0px;padding:0px;
سمة الهامش صالحة لـ IE، وسمة الحشو صالحة لـ FireFox. ← تم التعبير عن هذه الجملة بشكل غير صحيح، يرجى مراجعة ↓ لمزيد من التفاصيل
[ملاحظة] لم يتم التحقق من هذه المشكلة فعليًا وسيتم تعديلها بعد التحقق.
[ملاحظة] تم التحقق من أنه في IE، يمكن أن يؤدي تعيين هامش: 0px إلى إزالة المسافات البادئة العلوية والسفلية واليسرى واليمنى والفراغات وأرقام القائمة أو نقاط القائمة ليس لها أي تأثير على النمط في Firefox، يمكن لضبط الهامش: 0px إزالة المسافات البادئة العلوية والسفلية فقط. بعد تعيين الحشو: 0px، يمكنك فقط إزالة المسافات البادئة اليسرى واليمنى. يجب عليك أيضًا تعيين نمط القائمة: لا شيء لإزالة أرقام القائمة أو النقاط. بمعنى آخر، في IE، يمكن تعيين هامش: 0px فقط لتحقيق التأثير النهائي، بينما في Firefox، يجب تعيين هامش: 0px وpadding:0px وlist-style:none في نفس الوقت لتحقيق التأثير النهائي.
22. مشكلة شفافية CSS IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).
FF: العتامة: 0.6.
[ملاحظة] من الأفضل كتابة كليهما ووضع خاصية العتامة أدناه.
23. مشكلة الزوايا الدائرية في CSS IE: الإصدارات أدناه ie7 لا تدعم الزوايا الدائرية.
FF: -moz-border-radius: 4px، أو -moz-border-radius-topleft:4px؛-moz-border-radius-topright:4px؛-moz-border-radius-bottomleft:4px؛-moz-border- نصف القطر-أسفل اليمين:4px؛.
[ملاحظة] مشكلة الزاوية المستديرة هي مشكلة كلاسيكية في CSS. يوصى باستخدام مجموعة إطارات JQuery لتعيين الزوايا المستديرة وترك هذه المشكلات المعقدة للآخرين.
هناك العديد من المشكلات في CSS، وحتى نفس تعريف CSS له تأثيرات عرض مختلفة في معايير الصفحات المختلفة. لمزيد من المعرفة، يرجى الرجوع إلى المقالة على 52CSS.com. الاقتراح الذي يتماشى مع التطوير هو أنه يجب كتابة الصفحة باستخدام معيار DHTML القياسي، مع استخدام أقل للجداول، ويجب أن يعتمد تعريف CSS على DOM القياسي قدر الإمكان، مع مراعاة المتصفحات السائدة مثل IE وفايرفوكس وأوبرا. راجع للشغل، في كثير من الحالات، تكون معايير تفسير CSS الخاصة بـ FF وOpera أقرب إلى معايير CSS وأكثر معيارية. 