1.FireFox ไม่สามารถรองรับ InnerText
Firefox รองรับ innerhtml แต่ไม่รองรับ innertext รองรับ TextContent เพื่อใช้ InnerText แต่ช่องว่างที่ไม่จำเป็นจะได้รับการเก็บรักษาไว้ตามค่าเริ่มต้น หากคุณไม่ได้ใช้ TextContent หากสตริงไม่มีรหัส HTML คุณสามารถใช้ InnerHTML แทนได้
2. ห้ามมิให้เลือกเนื้อหาหน้าเว็บ:
ใน IE โดยทั่วไป js จะใช้: obj.onselectStart = function () {return false;}
Firefox ใช้ CSS: -moz-user-select: none
3. การสนับสนุนตัวกรอง (ตัวอย่าง: ตัวกรองโปร่งใส):
เช่น: ตัวกรอง: อัลฟ่า (ความทึบ = 10);
Firefox: -moz-opacity: .10;
4. เหตุการณ์จับภาพ:
เช่น: obj.setCapture (), obj.releasecapture ()
Firefox: Document.addeventListener ("Mousemove", MousemoveFunction, TRUE);
Document.removeeVentListener ("Mousemove", MousemoveFunction, TRUE);
5. รับตำแหน่งเมาส์:
เช่น: event.clientx, event.clienty
Firefox: ฟังก์ชั่นเหตุการณ์จำเป็นต้องผ่านวัตถุเหตุการณ์
obj.onmousemove = function (ev) {
x = ev.pagex; y = ev.pagey;
-
6. ปัญหาขอบเขตขององค์ประกอบเช่น div:
ตัวอย่างเช่น: ตั้งค่า css :: {width: 100px; ความสูง: 100px; border:#000000 1px solid;}
ใน IE: ความกว้างของ div (รวมถึงความกว้างของเส้นขอบ): 100px, ความสูงของ div (รวมถึงความกว้างของเส้นขอบ): 100px;
และ Firefox: ความกว้างของ DIV (รวมถึงความกว้างของชายแดน): 102px, ความสูงของ div (รวมถึงความกว้างของเส้นขอบ): 102px;
ดังนั้นเมื่อทำหน้าต่างลากนี้ที่เข้ากันได้กับ IE และ Firefox คุณควรใช้สมองของคุณในการเขียน JS และ CSS และให้เคล็ดลับสองประการแก่คุณ
1. กำหนดประเภทเบราว์เซอร์:
var isie = document.all? จริง: เท็จ;
ฉันเขียนตัวแปรถ้า document.lys ทั้งหมดได้รับการสนับสนุนแล้ว isie = true มิฉะนั้น isie = false
2. การประมวลผล CSS ในเบราว์เซอร์ที่แตกต่างกัน:
โดยทั่วไปคุณสามารถใช้! สำคัญในการจัดลำดับความสำคัญของคำสั่ง CSS (รองรับโดย Firefox เท่านั้น)
ตัวอย่างเช่น: {Border-Width: 0px! สำคัญ; Border-Width: 1px;}
ภายใต้ Firefox องค์ประกอบนี้ไม่มีชายแดนและภายใต้ IE ความกว้างของเส้นขอบคือ 1px
1.Document.formname.item ("itemName") ปัญหา
คำอธิบายปัญหา: ใน IE คุณสามารถใช้ document.formname.item ("itemname") หรือ document.formname.elements ["ElementName"]; ใน Firefox คุณสามารถใช้ document.formname.elements ["ElementName"] เท่านั้น
วิธีแก้ปัญหา: ใช้ document.formname.elements ["ElementName"] ในลักษณะที่เป็นเอกภาพ
2. ปัญหาวัตถุคอลเลกชัน
คำอธิบายปัญหา: ใน IE คุณสามารถใช้ () หรือ [] เพื่อรับวัตถุคลาสคอลเลกชัน; ใน Firefox คุณสามารถใช้ [] เพื่อรับวัตถุคลาสคอลเลกชัน
วิธีแก้ปัญหา: ใช้ [] เพื่อรับวัตถุคลาสคอลเลกชันในลักษณะที่เป็นเอกภาพ
3. ปัญหาแอตทริบิวต์ที่กำหนดเอง
คำอธิบายปัญหา: ใน IE คุณสามารถใช้วิธีการรับแอตทริบิวต์ปกติเพื่อรับแอตทริบิวต์ที่กำหนดเองหรือคุณสามารถใช้ getAttribute () เพื่อรับแอตทริบิวต์ที่กำหนดเอง; ใน Firefox คุณสามารถใช้ GetAttribute () เพื่อรับแอตทริบิวต์ที่กำหนดเองเท่านั้น
วิธีแก้ปัญหา: ได้รับแอตทริบิวต์ที่กำหนดเองอย่างสม่ำเสมอผ่าน GetAttribute ()
4.Val ("idname") ปัญหา
คำอธิบายปัญหา: ใน IE คุณสามารถใช้ eval ("idName") หรือ getElementById ("idName") เพื่อรับวัตถุ HTML ด้วย idName; ใน Firefox คุณสามารถใช้ GetElementById ("Idname") เพื่อรับวัตถุ HTML ด้วย Idname
วิธีแก้ปัญหา: ใช้ getElementById ("idName") เพื่อรับวัตถุ HTML ด้วย ID เป็นชื่อ IDNAME
5. ปัญหาที่มีชื่อตัวแปรเดียวกับ ID วัตถุ HTML
คำอธิบายปัญหา: ภายใต้ IE, ID ของวัตถุ HTML สามารถใช้โดยตรงเป็นชื่อตัวแปรของวัตถุรองของเอกสาร แต่ไม่ใช่ใน Firefox; ภายใต้ Firefox ชื่อตัวแปรที่เหมือนกับ ID วัตถุ HTML สามารถใช้งานได้ แต่ไม่ใช่ใน IE
วิธีแก้ปัญหา: ใช้ document.getElementById ("idname") แทน document.idname เป็นการดีที่สุดที่จะไม่ใช้ชื่อตัวแปรที่มี ID วัตถุ HTML เดียวกันเพื่อลดข้อผิดพลาด เมื่อประกาศตัวแปรให้เพิ่มคำหลัก VAR เพื่อหลีกเลี่ยงความคลุมเครือ
6. ปัญหาเรื่อง
คำอธิบายปัญหา: ใน Firefox คุณสามารถใช้คำหลัก const หรือคำหลัก var เพื่อกำหนดค่าคงที่; ใน IE คุณสามารถใช้คำหลัก VAR เพื่อกำหนดค่าคงที่
วิธีแก้ปัญหา: ใช้คำหลัก VAR เพื่อกำหนดค่าคงที่อย่างสม่ำเสมอ
7. ปัญหาแอตทริบิวต์อินพุต
คำอธิบายปัญหา: คุณสมบัติ input.type ภายใต้ IE เป็นแบบอ่านอย่างเดียว; แต่คุณสมบัติ input.type ภายใต้ Firefox คือการอ่าน-เขียน
วิธีแก้ปัญหา: อย่าแก้ไขคุณสมบัติ input.type หากคุณต้องแก้ไขคุณสามารถซ่อนอินพุตดั้งเดิมก่อนจากนั้นแทรกองค์ประกอบอินพุตใหม่ในตำแหน่งเดียวกัน
8. window.event ปัญหา
คำอธิบายปัญหา: หน้าต่างสามารถทำงานได้ภายใต้ IE เท่านั้นไม่ใช่ใน Firefox เนื่องจากเหตุการณ์ Firefox สามารถใช้ได้เฉพาะในฉากที่เหตุการณ์เกิดขึ้น
วิธีแก้ปัญหา: เพิ่มพารามิเตอร์เหตุการณ์ในฟังก์ชั่นที่เหตุการณ์เกิดขึ้นและใช้ var myEvent = evt? eVt: (window.event? window.event: null)
ตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
<อินพุต type = "ปุ่ม" onclick = "dosomething (เหตุการณ์)"/>
<ภาษาสคริปต์ = "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;
หากคุณพิจารณาปัญหาที่ 8 เพียงใช้ MyEvent แทนเหตุการณ์
10. หลักฐานการแบ่งแยก
คำอธิบายปัญหา: ภายใต้ IE วัตถุคู่มีคุณสมบัติ SRCELEMENT แต่ไม่มีคุณสมบัติเป้าหมาย ภายใต้ Firefox วัตถุคู่มีคุณสมบัติเป้าหมาย แต่ไม่มีคุณสมบัติ srcelement
วิธีแก้ปัญหา: ใช้ srcobj = event.srcelement? Event.srcelement: Event.target;
หากคุณพิจารณาปัญหาที่ 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 แน่นอนคุณสามารถพิจารณาใช้วิธีการตั้งสถานที่ ()
12. ปัญหาหน้าต่างโมดอลและไม่ใช่โมดอล
คำอธิบายปัญหา: ภายใต้ IE, Windows Modal และ Non-Modal สามารถเปิดได้ผ่าน showmodaldialog และ showmodelessDialog; ภายใต้ Firefox มันไม่สามารถ
วิธีแก้ปัญหา: ใช้ window.open (pageurl, ชื่อ, พารามิเตอร์) เพื่อเปิดหน้าต่างใหม่
หากคุณต้องการส่งพารามิเตอร์ในหน้าต่างลูกกลับไปที่หน้าต่างพาเรนต์คุณสามารถใช้ window.opener ในหน้าต่างลูกเพื่อเข้าถึงหน้าต่างพาเรนต์ หากหน้าต่างหลักจำเป็นต้องควบคุมหน้าต่างลูกให้ใช้ var subwindow = window.open (pageurl, ชื่อ, พารามิเตอร์); เพื่อให้ได้วัตถุหน้าต่างที่เปิดใหม่
13. ปัญหาและ iframe ปัญหา
เฟรมต่อไปนี้เป็นตัวอย่าง:
<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 = inject; ในกรณีที่ฟังก์ชั่น inject () ถูกนำไปใช้ก่อนหน้านี้; ใน Firefox ให้ใช้ document.body.onload = inject ();
วิธีแก้ปัญหา: ใช้ document.body.onload = ฟังก์ชั่นใหม่ ('inject ()'); หรือ document.body.onload = function () {/* นี่คือรหัส*/}
[หมายเหตุ] ความแตกต่างระหว่างฟังก์ชั่นและฟังก์ชั่น
16. ความแตกต่างระหว่างองค์ประกอบหลักที่เข้าถึงได้
คำอธิบายปัญหา: ภายใต้ IE ให้ใช้ obj.parentelement หรือ obj.parentNode เพื่อเข้าถึงโหนดแม่ของ OBJ; ภายใต้ Firefox ให้ใช้ obj.parentNode เพื่อเข้าถึงโหนดแม่ของ OBJ
วิธีแก้ปัญหา: เนื่องจากทั้ง Firefox และ IE สนับสนุน DOM, OBJ.ParentNode ใช้เพื่อเข้าถึงโหนดพาเรนต์ของ OBJ
17.Cursor: Hand vs Cursor: Pointer
คำอธิบายปัญหา: Firefox ไม่รองรับมือ แต่เช่นสนับสนุนตัวชี้ทั้งสองเป็นตัวบ่งชี้รูปมือ
วิธีแก้ปัญหา: ใช้ตัวชี้ในแบบครบวงจร
18. ปัญหาเกี่ยวกับข้อความภายใน
คำอธิบายปัญหา: InnerText ทำงานได้อย่างถูกต้องใน IE แต่ InnerText ไม่ทำงานใน Firefox
วิธีแก้ปัญหา: ใช้ textContent แทน innerText ในเบราว์เซอร์ที่ไม่ใช่ IE
ตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
if (navigator.appname.indexof ("Explorer")> -1) {
document.getElementById ('องค์ประกอบ'). innerText = "ข้อความของฉัน";
} อื่น{
document.getElementById ('องค์ประกอบ'). textContent = "ข้อความของฉัน";
-
[หมายเหตุ] 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 การใช้วิธีการภาคผนวกไม่ทำงาน
สารละลาย:
การคัดลอกรหัสมีดังนี้:
// เพิ่มบรรทัดว่างลงในตาราง:
var row = otable.insertrow (-1);
var cell = document.createElement ("TD");
cell.innerhtml = "";
cell.className = "xxxx";
row.appendchild (เซลล์);
[หมายเหตุ] เนื่องจากฉันไม่ค่อยใช้ JS ในการใช้งานตารางโดยตรงฉันไม่เคยพบปัญหานี้เลย ขอแนะนำให้ใช้ชุด JS Framework เพื่อจัดการกับตารางเช่น jQuery
21. ปัญหาของการเยื้องรายการ UL และ OL
เมื่อกำจัดการเยื้องรายการเช่น UL, OL, ฯลฯ สไตล์ควรเขียนเป็น: รายการสไตล์: ไม่มี; มาร์จิ้น: 0px; Padding: 0px;
แอตทริบิวต์มาร์จิ้นนั้นใช้ได้สำหรับ IE และแอตทริบิวต์การขยายนั้นใช้ได้กับ Firefox ←ประโยคนี้ไม่ถูกต้องดูรายละเอียด↓
[หมายเหตุ] ปัญหานี้ยังไม่ได้รับการตรวจสอบจริงและจะได้รับการแก้ไขหลังจากการตรวจสอบ
[หมายเหตุ] ได้รับการพิสูจน์แล้วว่าใน IE การตั้งค่ามาร์จิ้น: 0PX สามารถลบเยื้องด้านซ้ายและขวา, ช่องว่าง, หมายเลขรายการหรือจุดของรายการและการตั้งค่าการตั้งค่าไม่มีผลต่อสไตล์; ใน Firefox การตั้งค่ามาร์จิ้น: 0PX สามารถลบพื้นที่สีขาวขึ้นและลงได้และหลังจากการตั้งค่าช่องว่าง: 0PX สามารถลบเยื้องด้านซ้ายและขวาได้เท่านั้นและคุณต้องตั้งค่าสไตล์รายการ: ไม่มีการลบหมายเลขรายการหรือจุด กล่าวอีกนัยหนึ่งใน IE คุณสามารถบรรลุเอฟเฟกต์สุดท้ายได้โดยเพียงแค่การตั้งค่ามาร์จิ้น: 0PX, การตอบสนอง: 0PX และสไตล์รายการ: ไม่มีการตั้งค่าในเวลาเดียวกันใน Firefox เพื่อให้ได้เอฟเฟกต์สุดท้าย
22. ปัญหาความโปร่งใส CSS
เช่น: ตัวกรอง: 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-Radius-Bottomright: 4px;
[หมายเหตุ] ปัญหามุมโค้งมนเป็นปัญหาคลาสสิกใน CSS ขอแนะนำให้ใช้ JQuery Framework ที่ตั้งค่าไว้เพื่อตั้งมุมโค้งมนเพื่อให้ปัญหาที่ซับซ้อนเหล่านี้เพื่อให้ผู้อื่นคิด
มีคำถามมากมายเกี่ยวกับ CSS และแม้แต่คำจำกัดความ CSS เดียวกันก็มีเอฟเฟกต์การแสดงผลที่แตกต่างกันในมาตรฐานหน้าต่างๆ ข้อเสนอแนะที่เหมาะสมคือหน้าเขียนในมาตรฐาน DHTML มาตรฐานและการใช้ตารางไม่ค่อยใช้ คำจำกัดความของ CSS ควรขึ้นอยู่กับ DOM มาตรฐานให้มากที่สุดเท่าที่จะเป็นไปได้และเบราว์เซอร์กระแสหลักเช่น IE, Firefox และ Opera ก็ถูกนำมาพิจารณาเช่นกัน ในหลายกรณี BTW มาตรฐานการตีความ CSS ของ FF และ Opera นั้นใกล้เคียงกับมาตรฐาน CSS มากขึ้นและมีมาตรฐานมากขึ้น