1. document.formName.item("itemName") وصف المشكلة: ضمن IE، يمكنك استخدام document.formName.item("itemName") أو document.formName.elements ["elementName"] ضمن Firefox، ويمكنك استخدامه فقط وثيقة .formName.elements["elementName"].
الحل: استخدم document.formName.elements["elementName"] بشكل موحد.
2. وصف مشكلة كائن المجموعة: ضمن IE، يمكنك استخدام () أو [] للحصول على كائنات المجموعة؛ ضمن Firefox، يمكنك فقط استخدام [ ] للحصول على كائنات المجموعة.
الحل: استخدم [] بشكل موحد للحصول على كائنات المجموعة.
3. وصف مشكلة السمات المخصصة: ضمن IE، يمكنك استخدام طريقة الحصول على السمات العادية للحصول على السمات المخصصة، أو يمكنك استخدام getAttribute() للحصول على السمات المخصصة ضمن Firefox، يمكنك فقط استخدام getAttribute() للحصول على السمات المخصصة .
الحل: الحصول على السمات المخصصة بشكل موحد من خلال getAttribute().
4. وصف المشكلة eval("idName"): ضمن IE، يمكنك استخدام eval("idName") أو getElementById("idName") للحصول على كائن HTML بالمعرف idName ضمن Firefox، ويمكنك فقط استخدام getElementById(" idName" ) للحصول على كائن HTML بالمعرف idName.
الحل: استخدم getElementById("idName") بشكل موحد للحصول على كائن HTML بالمعرف idName.
5. مشكلة أن اسم المتغير هو نفس معرف كائن HTML وصف المشكلة: ضمن IE، يمكن استخدام معرف كائن HTML مباشرة كاسم متغير للكائن الثانوي للمستند، ولكن ليس ضمنه. Firefox؛ ضمن Firefox، يمكن استخدام المتغير الذي يحمل نفس معرف اسم كائن HTML، ولكن ليس ضمن IE.
الحل البديل: استخدم document.getElementById("idName") بدلاً من document.idName. من الأفضل عدم استخدام أسماء المتغيرات بنفس معرف كائن HTML لتقليل الأخطاء؛ عند الإعلان عن المتغيرات، قم دائمًا بإضافة الكلمة الأساسية var لتجنب الغموض.
6. وصف مشكلة Const: ضمن Firefox، يمكنك استخدام الكلمة الأساسية const أو الكلمة الأساسية var لتحديد الثوابت؛ ضمن IE، يمكنك فقط استخدام الكلمة الأساسية var لتحديد الثوابت.
الحل: استخدم الكلمة الأساسية var بشكل موحد لتحديد الثوابت.
7. مشكلة في سمة Input.type وصف المشكلة: السمة input.type ضمن IE للقراءة فقط؛ ولكن السمة input.type ضمن Firefox هي للقراءة والكتابة.
الحل: لا تقم بتعديل سمة input.type. إذا كان يجب عليك تعديله، فيمكنك إخفاء الإدخال الأصلي أولاً، ثم إدراج عنصر إدخال جديد في نفس الموضع.
8. مشكلة Window.event وصف المشكلة: يمكن تشغيل window.event فقط ضمن IE، ولكن ليس ضمن Firefox، وذلك لأنه لا يمكن استخدام حدث Firefox إلا في مكان وقوع الحدث.
الحل: أضف معلمة الحدث إلى الوظيفة التي وقع فيها الحدث، واستخدم var myEvent = evt?evt:(window.event?window.event:null) في نص الوظيفة (بافتراض أن المعلمة الرسمية هي evt)
مثال:
كود البرنامج
<نوع الإدخال = "زر" onclick = "doSomething (الحدث)"/>
<لغة البرمجة = "جافا سكريبت">
وظيفة افعل شيئا (ايفت) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}
</script>
9. وصف المشكلة Event.x وevent.y: في IE، يحتوي الكائن الزوجي على سمات x وy، ولكن ليس سمات pageX وpageY؛ وفي Firefox، يحتوي الكائن الزوجي على سمات pageX وpageY، ولكن لا يحتوي على سمات x وy.
الحل: var myX =event.x ?event.x :event.pageX;
إذا فكرت في السؤال 8، فما عليك سوى استخدام myEvent بدلاً من الحدث.
10. مشكلة Event.srcElement وصف المشكلة: في IE، يحتوي الكائن الزوجي على سمة srcElement، وليس السمة المستهدفة؛ وفي Firefox، يحتوي الكائن الزوجي على السمة الهدف، لكنه لا يحتوي على سمة srcElement.
الحل: استخدم srcObj = events.srcElement؟
إذا فكرت في السؤال 8، فما عليك سوى استخدام myEvent بدلاً من الحدث.
11. مشكلة Window.location.href وصف المشكلة: ضمن IE أو Firefox2.0.x، يمكنك استخدام window.location أو window.location.href ضمن Firefox1.5.x، يمكنك فقط استخدام window.location.
الحل البديل: استخدم window.location بدلاً من window.location.href. بالطبع، يمكنك أيضًا التفكير في استخدام التابع location.replace() .
12. مشكلات النوافذ المشروطة وغير المشروطة وصف المشكلة: ضمن IE، يمكن فتح النوافذ المشروطة وغير المشروطة من خلال showModalDialog وshowModelessDialog ضمن Firefox، وهذا غير ممكن.
الحل: استخدم طريقة window.open(pageURL,name,parameters) مباشرة لفتح نافذة جديدة.
إذا كنت بحاجة إلى تمرير المعلمات في النافذة الفرعية مرة أخرى إلى النافذة الأصلية، فيمكنك استخدام window.opener في النافذة الفرعية للوصول إلى النافذة الرئيسية. إذا كنت بحاجة إلى النافذة الرئيسية للتحكم في النافذة الفرعية، فاستخدم var subWindow = window.open(pageURL,name,parameters);
13. مسألة الإطار والإطار تأخذ الإطار التالي كمثال:
<frame src=" http://www.abc.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 = "index.html" أو window.frameName.location = "index.html" لتبديل محتوى الإطار في كل من IE وفايرفوكس.
إذا كنت بحاجة إلى تمرير المعلمات الموجودة في الإطار مرة أخرى إلى النافذة الأصلية، فيمكنك استخدام الكلمة الأساسية الأصلية في الإطار للوصول إلى النافذة الرئيسية.
14. مشكلة تحميل الجسم وصف المشكلة: يوجد كائن الجسم في Firefox قبل أن يقرأ المتصفح علامة الجسم بالكامل، بينما يجب أن يكون كائن الجسم في IE موجودًا بعد قراءة المتصفح لعلامة الجسم بالكامل.
[ملاحظة] لم يتم التحقق من هذه المشكلة فعليًا وسيتم تعديلها بعد التحقق.
[ملاحظة] تم التحقق من أن المشكلة المذكورة أعلاه غير موجودة في IE6 وOpera9 وFireFox2. يمكن لبرنامج نصي JS بسيط الوصول إلى جميع الكائنات والعناصر التي تم تحميلها قبل البرنامج النصي، حتى لو لم يتم تحميل العنصر بعد.
15. شرح مشكلة طريقة تفويض الحدث: في IE، استخدم document.body.onload = inject؛ حيث تم تنفيذ الدالة inject() من قبل في Firefox، استخدم document.body.onload = inject();
الحل: استخدم document.body.onload=new Function('inject()'); أو document.body.onload = function(){/* هذا هو الرمز */
[ملاحظة] الفرق بين الوظيفة والوظيفة
16. الفرق بين العناصر الأصلية التي تم الوصول إليها وصف السؤال: ضمن 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.
مثال:
كود البرنامج
إذا (navigator.appName.indexOf("المستكشف") >-1){
document.getElementById('element').innerText = "النص الخاص بي";
} آخر{
document.getElementById('element').textContent = "النص الخاص بي";
}
[ملاحظة] إن لغة HTML الداخلية مدعومة من قبل متصفحات مثل IE وFirefox في نفس الوقت، أما المتصفحات الأخرى، مثل ExternalHTML، فهي مدعومة فقط من قبل IE ومن الأفضل عدم استخدامها.
19. مشكلة تعيين عرض وارتفاع الكائن وصف المشكلة: العبارات المشابهة لـ obj.style.height = imgObj.height في FireFox غير صالحة.
الحل: استخدم obj.style.height = imgObj.height + 'px' بشكل موحد؛
20. مشكلة في تشغيل الجدول وصف المشكلة: لدى IE وFirefox والمتصفحات الأخرى عمليات مختلفة على علامة الجدول، وهو أمر غير مسموح به في IE لتعيين HTML الداخلي الجدول و tr، عند استخدام js لإضافة tr، فإن استخدام طريقة appendChild لا يعمل.
حل:
رمز البرنامج
// إلحاق صف فارغ بالجدول:
صف فار = otable.insertRow(-1);
فار الخلية = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
Row.appendChild(cell);
[ملاحظة] نظرًا لأنني نادرًا ما أستخدم JS لتشغيل الجداول مباشرةً، لم أواجه هذه المشكلة مطلقًا. يوصى باستخدام إطار عمل JS لتشغيل الجداول، مثل JQuery.
21. مشكلة المسافة البادئة لقوائم ul وol عند إزالة المسافة البادئة لقوائم 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 له تأثيرات عرض مختلفة في معايير الصفحات المختلفة. الاقتراح الذي يتماشى مع التطوير هو أن الصفحة يجب أن تتم كتابتها باستخدام معايير DHTML القياسية، مع استخدام أقل لتعريفات CSS يجب أن تعتمد على DOM القياسي قدر الإمكان، مع الأخذ في الاعتبار المتصفحات السائدة مثل IE وFirefox. ، والأوبرا. راجع للشغل، في كثير من الحالات، تكون معايير تفسير CSS الخاصة بـ FF وOpera أقرب إلى معايير CSS وأكثر معيارية.