CSS و JavaScript في IE و Firefox ثلاثة وعشرون الاختلاف

1. document.formname.item ("itemName") الوصف: تحت IE ، يمكنك استخدام document.formname.item ("itemName") document.formname.item ("itemName") أو document.formName.Elements ["elementName"] ؛ .
الحل: استخدم المستند.

2. وصف مشكلة فئة المجموعة: في IE ، يمكنك استخدام () أو [] للحصول على كائنات فئة التجميع ؛
الحل: استخدم [] للحصول على كائنات فئة التجميع بطريقة موحدة.

3. وصف مشكلة السمة المخصصة: في IE ، يمكنك استخدام طريقة الحصول على سمات منتظمة للحصول على سمات مخصصة ، أو يمكنك استخدام getAttribute () للحصول على سمات مخصصة ؛ .
الحل البديل: الحصول على سمات مخصصة بشكل موحد من خلال getAttribute ().

4. eval ("idname") الوصف: في IE ، يمكنك استخدام eval ("idname") أو getElementByid ("idname") للحصول على كائن HTML مع idname ؛ للحصول على كائن HTML مع معرف باسم idname.
الحل: استخدم getElementByID ("idname") للحصول على كائن HTML مع معرف كمعرف.

5. مشكلة مع نفس الاسم المتغير مثل معرف كائن HTML: تحت IE ، يمكن استخدام معرف كائن HTML مباشرة كاسم متغير للكائن التابع للمستند ، ولكن ليس في Firefox ؛ يمكن استخدام معرف كائن HTML.
الحل البديل: استخدم المستند. من الأفضل عدم أخذ أسماء متغيرة بنفس معرف كائن HTML لتقليل الأخطاء ؛

6. وصف مشكلة: تحت Firefox ، يمكنك استخدام الكلمة الرئيسية Const أو الكلمة الرئيسية VAR لتحديد الثوابت ؛
الحل: استخدم الكلمة الرئيسية VAR لتحديد الثوابت بشكل موحد.

7. وصف مشكلة الإدخال. السمة: السمة input.type تحت IE هي القراءة فقط ؛
الحل: لا تعدل خاصية input.type. إذا كان عليك تعديله ، فيمكنك أولاً إخفاء الإدخال الأصلي ثم أدخل عنصر إدخال جديد في نفس الموضع.

8. Window.Event مشكلة الوصف: Window.Event لا يمكن تشغيله إلا تحت IE ، وليس تحت Firefox ، لأنه لا يمكن استخدام حدث Firefox إلا في المشهد حيث يحدث الحدث.
الحل: أضف معلمات الحدث إلى الوظيفة التي يحدث فيها الحدث ، واستخدم var myevent = evt؟ evt: (window.event؟ window.event: null)
مثال:

رمز البرنامج
<type type = "button" onClick = "dosomething (event)"/>
<script language = "javaScript">
وظيفة dosomething (evt) {
var myevent = evt؟ evt: (window.event؟ window.event: null)
...
}
</script>

9. event.x و event.y الوصف: تحت IE ، يحتوي الكائن حتى على سمات X و Y ، ولكن لا توجد سمات Pagex و Pagey ؛
الحل: var myx = event.x؟
إذا كنت تفكر في العدد الثامن ، فما عليك سوى استخدام MyEvent بدلاً من الحدث.

10. Event.Srcelement Problem الوصف: بموجب IE ، يحتوي الكائن على خاصية srcelement ، ولكن لا يوجد خاصية مستهدفة ؛
الحل: استخدم srcobj = event.srcelement؟
إذا كنت تفكر في العدد الثامن ، فما عليك سوى استخدام MyEvent بدلاً من الحدث.

11. window.location.href الوصف: تحت IE أو Firefox2.0 ، يمكنك استخدام Window.location أو Window.location.href ؛
الحل البديل: استخدم window.location بدلاً من window.location.href. بالطبع ، يمكنك أيضًا التفكير في استخدام طريقة site.replace ().

12. وصف النافذة المشروطة وغير الوسطى: تحت IE ، يمكن فتح النوافذ المشروطة وغير الوسائط من خلال Showmodaldialog و showmodialog ؛
الحل: استخدم window.open (pageurl ، الاسم ، المعلمات) لفتح نافذة جديدة.
إذا كنت بحاجة إلى تمرير معلمات في نافذة الطفل مرة أخرى إلى النافذة الأصل ، فيمكنك استخدام Window.Opener في نافذة الطفل للوصول إلى النافذة الأصل. إذا كانت النافذة الأصل تحتاج إلى التحكم في نافذة الطفل ، فاستخدم VAR Subwindow = Window.Open (Pageurl ، الاسم ، المعلمات) ؛

ثلاثة عشر.
<الإطار src = "http://www.abc.com/123.html" id = "frameid"
(1) الوصول إلى كائن الإطار IE: استخدم window.frameid أو window.framename للوصول إلى كائن الإطار هذا ؛
Firefox: استخدم window.framename للوصول إلى كائن الإطار هذا ؛
الحل: استخدم window.document.getElementById ("FrameId") للوصول إلى كائن الإطار هذا ؛
(2) تبديل محتوى الإطار في كل من IE و Firefox ، يمكنك استخدام window.document.getElementById ("FrameId"). ه ؛
إذا كنت بحاجة إلى تمرير المعلمات في الإطار مرة أخرى إلى النافذة الأصل ، فيمكنك استخدام الكلمة الرئيسية الأصل في الإطار للوصول إلى النافذة الأصل.

14. مشكلة تحميل الجسم: موجود جسم Firefox قبل أن يتم قراءة علامة الجسم بالكامل من قبل المتصفح.
[ملاحظة] لم يتم التحقق من هذه المشكلة بالفعل بعد ، وسيتم تعديلها بعد التحقق.
[ملاحظة] ثبت أن المشكلات المذكورة أعلاه غير موجودة في IE6 و Opera9 و Firefox2.

15. وصف طريقة تفويض الحدث: في IE ، استخدم المستند.
الحل: استخدم document.onload = new function ('enject ()') ؛
[ملاحظة] الفرق بين الوظيفة والوظيفة

16. الكشف عن الفرق بين عناصر الوالدين التي تم الوصول إليها: في IE ، استخدم OBJ.ParentElement أو OBJ.ParentNode للوصول إلى عقدة OBJ في Firefox ، استخدم OBJ.ParentNode للوصول إلى عقدة الوالدين OBJ.
الحل: نظرًا لأن كلا من Firefox و IE DOM ، يتم استخدام OBJ.ParentNode للوصول إلى عقدة الوالدين لـ OBJ.

17. المؤشر: اليد مقابل المؤشر: مؤشر
وصف المشكلة: لا يدعم Firefox اليد ، لكن أي مؤشر يدعم ، كلاهما مؤشر على شكل يدوي.
الحل: استخدم المؤشر بطريقة موحدة.

18. مشكلة النص الداخلي.
وصف المشكلة: يعمل النص الداخلي بشكل صحيح في IE ، لكن النص الداخلي لا يعمل في Firefox.
الحل البديل: استخدم TextContent بدلاً من النص الداخلي في المتصفحات غير IE.
مثال:

رمز البرنامج
if (navigator.appname.indexof ("explorer")> -1) {
document.getElementById ('element'). innertext = "my text" ؛
} آخر{
document.getElementById ('element'). TextContent = "text my my text" ؛
}

[ملاحظة] يتم دعم InnerHTML من قبل متصفحات مثل IE و Firefox.

19. وصف مشكلة عرض الكائن وتعيين الارتفاع: البيان المشابه لـ OBJ.Style.Height = Imgobj.Height في Firefox غير صالح.
الحل: استخدم obj.style.height = imgobj.height + 'px' في الزي الرسمي ؛

20. مشكلة تشغيل الجدول: لا يُسمح بتعيين قيم InnerHTML إلى TABLE و TR.
حل:

رمز البرنامج
// أضف سطرًا فارغًا إلى الجدول:
var row = otable.inserTrow (-1) ؛
var cell = document.createElement ("td") ؛
cell.innerhtml = "" ؛
cell.className = "xxxx" ؛
row.appendchild (Cell) ؛

[ملاحظة] بما أنني نادراً ما أستخدم JS لتشغيل الجداول مباشرة ، لم أواجه هذه المشكلة مطلقًا. يوصى باستخدام مجموعات إطار عمل JS لمعالجة الجداول ، مثل jQuery.

21. عندما يتم القضاء على مشكلة المسافة البادئة في UL و OL ، يجب كتابة النمط على النحو التالي: لا شيء ؛
سمة الهامش صالحة لـ IE وسمة الحشو صالحة لـ Firefox. ← هذه الجملة غير صحيحة ، انظر للحصول على التفاصيل ↓
[ملاحظة] لم يتم التحقق من هذه المشكلة بالفعل بعد ، وسيتم تعديلها بعد التحقق.
[ملاحظة] أثبتت أنه في الهامش في IE: يمكن أن يؤدي 0px إلى إزالة المسافة البادئة للأعلى واليمين واليمين ، والرقم الفارغ ، أو النقاط في القائمة ، ولا يوجد تأثير على الحشوة على النمط ؛ يمكن لـ 0px إزالة المساحة الفارغة لأعلى ولأسفل فقط لإزالة المسافة البادئة اليمنى واليسرى بعد إعداد الحشو: 0px. بمعنى آخر ، في IE ، يمكنك تحقيق التأثير النهائي بمجرد تعيين هامش: 0px ، الحشو: 0px ونمط القائمة: يجب تعيين أي منها في نفس الوقت في Firefox لتحقيق التأثير النهائي.

22. مشكلة الشفافية CSS IE: Filter: ProgID: dximagetransform.microsoft.alpha (النمط = 0 ، التعتيم = 60).
FF: العتامة: 0.6.
[ملاحظة] من الأفضل كتابة كلاهما ووضع سمة العتامة أدناه.

23. مشكلة الزاوية المستديرة في CSS ، أي: الإصدارات التالية من IE7 لا تدعم الزوايا المستديرة.
FF: -Moz-Border-Radius: 4px ، أو -moz-border-topleft: 4px ؛ - دائرة نصف قطرها- أسفل: 4px ؛.
[ملاحظة] مشكلة الزاوية المستديرة هي مشكلة كلاسيكية في CSS.

هناك الكثير من الأسئلة حول CSS ، وحتى نفس تعريفات CSS لها تأثيرات عرض مختلفة في معايير الصفحات المختلفة. الاقتراح المناسب هو أن الصفحة مكتوبة في معيار DHTML القياسي ، ونادراً ما يتم استخدام تعريف الجداول. الأوبرا تؤخذ أيضا في الاعتبار. راجع للشغل ، في كثير من الحالات ، تكون معايير تفسير CSS لـ FF و Opera أقرب إلى معايير CSS وأكثر توحيدًا.