1. لا يمكن لدعم النص الداخلي.
يدعم Firefox InnerHTML ولكنه لا يدعم النص الداخلي. وهو يدعم TextContent لتنفيذ النص الداخلي ، ولكن يتم أيضًا الحفاظ على المساحات غير الضرورية افتراضيًا. إذا لم تستخدم TextContent ، إذا لم تحتوي السلسلة على رمز HTML ، فيمكنك أيضًا استخدام InnerHTML بدلاً من ذلك.
2. يحظر تحديد محتوى صفحة الويب:
في IE ، يتم استخدام JS بشكل عام: OBJ.ONSELECTSTART = function () {return false ؛}
يستخدم Firefox CSS: -Moz-User-Select: لا شيء
3. دعم المرشح (مثال: مرشح شفاف):
IE: Filter: alpha (عتامة = 10) ؛
Firefox: -moz-opacity: .10 ؛
4. التقاط الأحداث:
IE: obj.setcapture () ، obj.releasecapture ()
Firefox: document.addeventListener ("Mousemove" ، MousemoveFunction ، true) ؛
document.RemoveEventListener ("mousemove" ، mousemovefunction ، true) ؛
5. احصل على موضع الماوس:
IE: event.clientx ، event.clienty
Firefox: تحتاج وظيفة الحدث إلى تمرير كائن الحدث
obj.onmousemove = function (ev) {
x = ev.pagex ؛ y = ev.pagey ؛
}
6. قضايا الحدود للعناصر مثل Div:
على سبيل المثال: تعيين CSS's CSS :: {العرض: 100px ؛ الارتفاع: 100px ؛ الحدود:#000000 1px solid ؛}
في IE: عرض Div (بما في ذلك عرض الحدود): 100px ، ارتفاع Div (بما في ذلك عرض الحدود): 100px ؛
و Firefox: عرض Div (بما في ذلك عرض الحدود): 102 بكسل ، ارتفاع Div (بما في ذلك عرض الحدود): 102px ؛
لذلك عند القيام بنافذة السحب هذه المتوافقة مع IE و Firefox ، يجب عليك استخدام دماغك لكتابة JS و CSS ، وتمنحك نصيحتين
1. تحديد نوع المتصفح:
var isie = document.all؟ صحيح: خطأ
لقد كتبت متغيرًا ، إذا تم دعم جميع بناء الجملة ، ثم ISIE = صحيح ، وإلا
2. معالجة CSS في متصفحات مختلفة:
بشكل عام ، يمكنك استخدام! مهم لتحديد أولويات عبارات CSS (مدعومة فقط بواسطة Firefox)
على سبيل المثال: {عرض الحدود: 0px! مهم ؛ عرض الحدود: 1px ؛}
تحت Firefox ، لا يحتوي هذا العنصر على حدود ، وتحت عرض الحدود هو 1 بكسل
1.document.formname.item ("itemName") مشكلة
وصف المشكلة: في IE ، يمكنك استخدام document.formname.item ("itemName") أو المستند. في Firefox ، يمكنك فقط استخدام 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 مع معرف كمعرف.
5. مشكلة مع نفس الاسم المتغير مثل معرف كائن HTML
وصف المشكلة: بموجب IE ، يمكن استخدام معرف كائن HTML مباشرة كاسم متغير للكائن التابع للمستند ، ولكن ليس في Firefox ؛ تحت Firefox ، يمكن استخدام الاسم المتغير الذي هو نفسه معرف كائن HTML ، ولكن ليس في IE.
الحل البديل: استخدم المستند. من الأفضل عدم أخذ أسماء متغيرة بنفس معرف كائن HTML لتقليل الأخطاء ؛ عند إعلان المتغيرات ، أضف الكلمة الرئيسية VAR لتجنب الغموض.
6. قضية
وصف المشكلة: في 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)
مثال:
نسخة الكود كما يلي:
<type type = "button" onClick = "dosomething (event)"/>
<script language = "javaScript">
وظيفة dosomething (evt) {
var myevent = evt؟ evt: (window.event؟ window.event: null)
...
}
9. event.x و event.y قضايا
وصف المشكلة: تحت IE ، يحتوي الكائن الزوجي على سمات x و y ، ولكن لا توجد سمات pagex و pagey ؛ تحت Firefox ، يحتوي الكائن الزوجي على سمات pagex و pagey ، ولكن لا توجد سمات x و y.
الحل: var myx = event.x؟ event.x: event.pagex ؛ var myy = event.y؟ event.y: event.pagey ؛
إذا كنت تفكر في العدد الثامن ، فما عليك سوى استخدام MyEvent بدلاً من الحدث.
10.Event.Srcelement مشكلة
وصف المشكلة: بموجب IE ، يحتوي الكائن الزوجي على خاصية srcelement ، ولكن لا يوجد خاصية مستهدفة ؛ تحت Firefox ، يحتوي الكائن حتى على خاصية مستهدفة ، ولكن لا يوجد خاصية srcelement.
الحل: استخدم srcobj = event.srcelement؟ event.srcelement: event.target ؛
إذا كنت تفكر في العدد الثامن ، فما عليك سوى استخدام MyEvent بدلاً من الحدث.
11.Window.location.href مشكلة
وصف المشكلة: في IE أو Firefox2.0.x ، يمكنك استخدام window.location أو window.location.href ؛ في Firefox1.5.x ، يمكنك فقط استخدام window.location.
الحل البديل: استخدم window.location بدلاً من window.location.href. بالطبع ، يمكنك أيضًا التفكير في استخدام طريقة site.replace ().
12. مشاكل النوافذ المشروطة وغير الوسائط
وصف المشكلة: في ظل IE ، يمكن فتح النوافذ المشروطة وغير الوسائط من خلال ShowModaldialog و ShowModialog ؛ تحت Firefox ، لا يمكن.
الحل: استخدم window.open (pageurl ، الاسم ، المعلمات) لفتح نافذة جديدة.
إذا كنت بحاجة إلى تمرير معلمات في نافذة الطفل مرة أخرى إلى النافذة الأصل ، فيمكنك استخدام Window.Opener في نافذة الطفل للوصول إلى النافذة الأصل. إذا احتاجت النافذة الأصل إلى التحكم في نافذة الطفل ، فاستخدم VAR SubWindow = Window.Open (pageurl ، الاسم ، المعلمات) ؛ للحصول على كائن النافذة المفتوح حديثًا.
13. قضايا الإطار والإطارات الإطنائية
الإطار التالي مثال:
<frame src = "xxx.html" id = "frameid" name = "framename" />
(1) كائن إطار الوصول
IE: استخدم window.frameid أو window.framename للوصول إلى كائن الإطار هذا ؛
Firefox: استخدم window.framename للوصول إلى كائن الإطار هذا ؛
الحل: استخدم window.document.getElementById ("FrameId") للوصول إلى كائن الإطار هذا ؛
(2) محتوى إطار التبديل
في كل من IE و Firefox ، يمكنك استخدام window.document.getElementById ("FrameId"). src = "xxx.html" أو window.framename.location = "xxx.html" لتبديل محتوى الإطار ؛
إذا كنت بحاجة إلى تمرير المعلمات في الإطار مرة أخرى إلى النافذة الأصل ، فيمكنك استخدام الكلمة الرئيسية الأصل في الإطار للوصول إلى النافذة الأصل.
14. مشكلة تحميل الجسم
وصف المشكلة: يوجد جسم جسم Firefox قبل قراءة علامة الجسم بالكامل بواسطة المتصفح ؛ على الرغم من أن كائن الجسم الخاص بـ IE يجب أن يكون موجودًا بعد قراءة علامة الجسم بالكامل من قبل المتصفح.
[ملاحظة] لم يتم التحقق من هذه المشكلة بالفعل بعد ، وسيتم تعديلها بعد التحقق.
[ملاحظة] ثبت أن المشكلات المذكورة أعلاه غير موجودة في IE6 و Opera9 و Firefox2. يمكن لبرنامج نصي JS البسيط الوصول إلى جميع الكائنات والعناصر التي تم تحميلها قبل البرنامج النصي ، حتى لو لم يتم تحميل هذا العنصر بعد.
15. طريقة مندوب الحدث
وصف المشكلة: في IE ، استخدم document.body.onload = الحقن ؛ حيث تم تنفيذ وظيفة الحقن () قبل ذلك ؛ في Firefox ، استخدم document.body.onload = enject () ؛
الحل: استخدم document.body.onload = دالة جديدة ('enject ()') ؛ أو المستند.
[ملاحظة] الفرق بين الوظيفة والوظيفة
16. الاختلافات بين العناصر الوالدية التي تم الوصول إليها
وصف المشكلة: بموجب IE ، استخدم OBJ.ParentElement أو OBJ.ParentNode للوصول إلى العقدة الوالدية لـ OBJ ؛ تحت Firefox ، استخدم OBJ.ParentNode للوصول إلى العقدة الوالدية لـ OBJ.
الحل: نظرًا لأن كلا من Firefox و IE DOM ، يتم استخدام OBJ.ParentNode للوصول إلى عقدة الوالدين لـ OBJ.
17.Cursor: اليد مقابل المؤشر: مؤشر
وصف المشكلة: لا يدعم 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. أخرى ، مثل Outerhtml ، مدعومة فقط من قبل IE ، لذلك من الأفضل عدم استخدامه.
19. مشكلة عرض الكائن ومشكلة تخصيص الارتفاع
وصف المشكلة: البيان المشابه لـ OBJ.Style.Height = IMGOBJ.HEIGHT في Firefox غير صالح.
الحل: استخدم obj.style.height = imgobj.height + 'px' في الزي الرسمي ؛
20. قضايا تشغيل الجدول
وصف المشكلة: IE ، Firefox وغيرها من المتصفحات لها عمليات مختلفة على علامات الجدول. في IE ، لا يُسمح بتعيين قيم innerhtml للجدول و Tr. عند استخدام JS ، لا يعمل استخدام طريقة AppendChild.
حل:
نسخة الكود كما يلي:
// أضف سطرًا فارغًا إلى الجدول:
var row = otable.inserTrow (-1) ؛
var cell = document.createElement ("td") ؛
cell.innerhtml = "" ؛
cell.className = "xxxx" ؛
row.appendchild (Cell) ؛
[ملاحظة] بما أنني نادراً ما أستخدم JS لتشغيل الجداول مباشرة ، لم أواجه هذه المشكلة مطلقًا. يوصى باستخدام مجموعات إطار عمل JS لمعالجة الجداول ، مثل jQuery.
21. إصدار المسافة البادئة قائمة UL و OL
عند التخلص من المسافة البادئة للقوائم مثل UL ، OL ، وما إلى ذلك ، يجب كتابة النمط على النحو التالي: على غرار القائمة: لا شيء ؛ الهامش: 0px ؛ الحشو: 0px ؛
سمة الهامش صالحة لـ IE وسمة الحشو صالحة لـ Firefox. ← هذه الجملة غير صحيحة ، انظر للحصول على التفاصيل ↓
[ملاحظة] لم يتم التحقق من هذه المشكلة بالفعل بعد ، وسيتم تعديلها بعد التحقق.
[ملاحظة] لقد ثبت أنه في IE ، فإن تحديد هامش الإعداد: يمكن أن يؤدي 0px إلى إزالة المسافات البادئة لأعلى ولأسفل اليمنى ، والفراغات ، وأرقام القائمة أو النقاط في القائمة ، ولا يؤثر إعداد الحشوة على النمط ؛ في Firefox ، لا يمكن للهامش المُعد: 0px إزالة المساحة البيضاء لأعلى ولأسفل فقط ، وبعد إعداد الحشو: يمكن لـ 0px إزالة المسافة البادئة اليمنى واليسرى فقط ، ويجب عليك أيضًا تعيين نمط القائمة: لا شيء لإزالة رقم القائمة أو النقاط. بمعنى آخر ، في IE ، يمكنك تحقيق التأثير النهائي بمجرد تعيين هامش: 0px ، الحشو: 0px ونمط القائمة: يجب تعيين أي منها في نفس الوقت في Firefox لتحقيق التأثير النهائي.
22. قضية الشفافية CSS
IE: Filter: progid: dximagetransform.microsoft.alpha (النمط = 0 ، عتامة = 60).
FF: العتامة: 0.6.
[ملاحظة] من الأفضل كتابة كليهما ووضع سمة العتامة أدناه.
23. مشكلة الزاوية المستديرة CSS
IE: الإصدارات التالية من IE7 لا تدعم الزوايا المستديرة.
FF: -Moz-Border-Radius: 4px ، أو -moz-border-Radius-Topleft: 4px ؛ -الموز براديوس-توبريت: 4 بكسل ؛ -الموز براديوس-بوتومفت: 4 بكسل ؛ -Moz-Border-Radius-Bottomright: 4px ؛.
[ملاحظة] مشكلة الزاوية المستديرة هي مشكلة كلاسيكية في CSS. يوصى باستخدام مجموعة JQuery Framework لضبط الزوايا المستديرة لترك هذه المشكلات المعقدة للآخرين للتفكير.
هناك الكثير من الأسئلة حول CSS ، وحتى نفس تعريفات CSS لها تأثيرات عرض مختلفة في معايير الصفحات المختلفة. الاقتراح المناسب هو أن الصفحة مكتوبة بمعايير DHTML القياسية ، ونادراً ما يتم استخدام استخدام الجداول. يجب أن يعتمد تعريف CSS على DOM القياسي قدر الإمكان ، ويتم أخذ المتصفحات الرئيسية مثل IE و Firefox و Opera في الاعتبار. راجع للشغل ، في كثير من الحالات ، تكون معايير تفسير CSS لـ FF و Opera أقرب إلى معايير CSS وأكثر توحيدًا.