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 ด้วย id idName; ภายใต้ Firefox คุณสามารถใช้ getElementById(" เท่านั้น idName" ) เพื่อรับวัตถุ HTML ด้วย id 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. คำอธิบายปัญหาของ 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)
ตัวอย่าง:
รหัสโปรแกรม
<ภาษาสคริปต์ = "จาวาสคริปต์">
ฟังก์ชั่น 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 ?
หากคุณพิจารณาคำถามที่ 8 ให้ใช้ myEvent แทน event
10. ปัญหา Event.srcElement คำอธิบายปัญหา: ภายใต้ IE วัตถุคู่มีแอตทริบิวต์ srcElement แต่ไม่มีแอตทริบิวต์เป้าหมาย ใน Firefox วัตถุคู่มีแอตทริบิวต์เป้าหมาย แต่ไม่มีแอตทริบิวต์ srcElement
วิธีแก้ไข: ใช้ srcObj = event.srcElement ? event.srcElement : event.target;
หากคุณพิจารณาคำถามที่ 8 ให้ใช้ myEvent แทน event
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. ปัญหาหน้าต่าง Modal และไม่ใช่ Modal คำอธิบายปัญหา: ภายใต้ IE หน้าต่าง Modal และ Non-Modal สามารถเปิดได้ผ่าน showModalDialog และ showModelessDialog ภายใต้ Firefox สิ่งนี้เป็นไปไม่ได้
วิธีแก้ไข: ใช้เมธอด window.open(pageURL,name,parameters) โดยตรงเพื่อเปิดหน้าต่างใหม่
หากคุณต้องการส่งพารามิเตอร์ในหน้าต่างลูกกลับไปที่หน้าต่างหลัก คุณสามารถใช้ window.opener ในหน้าต่างลูกเพื่อเข้าถึงหน้าต่างหลักได้ หากคุณต้องการหน้าต่างหลักเพื่อควบคุมหน้าต่างลูก ให้ใช้ var subWindow = window.open(pageURL,name,parameters); เพื่อรับวัตถุหน้าต่างที่เพิ่งเปิดใหม่
13. ปัญหาของ frame และ i frame ใช้เฟรมต่อไปนี้เป็นตัวอย่าง:
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; โดยที่ function 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. เคอร์เซอร์:มือ VS เคอร์เซอร์:ตัวชี้
คำอธิบายของปัญหา: Firefox ไม่รองรับการใช้มือ แต่ IE รองรับตัวชี้ทั้งสองแบบ
วิธีแก้ไข: ใช้พอยน์เตอร์อย่างสม่ำเสมอ
18. ปัญหาเกี่ยวกับข้อความภายใน
คำอธิบายปัญหา: InnerText ทำงานได้ตามปกติใน IE แต่ InnerText ไม่ทำงานใน FireFox
วิธีแก้ไข: ใช้ textContent แทน innerText ในเบราว์เซอร์ที่ไม่ใช่ IE
ตัวอย่าง:
รหัสโปรแกรม
ถ้า(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "ข้อความของฉัน";
} อื่น{
document.getElementById('element').textContent = "ข้อความของฉัน";
-
[หมายเหตุ] innerHTML รองรับโดยเบราว์เซอร์ เช่น IE และ Firefox ในเวลาเดียวกัน ส่วนเบราว์เซอร์อื่นๆ เช่น externalHTML รองรับเฉพาะ IE เท่านั้น และไม่ควรใช้
19. ปัญหาการกำหนดความกว้างและความสูงของวัตถุ คำอธิบายปัญหา: ข้อความที่คล้ายกับ obj.style.height = imgObj.height ใน FireFox นั้นไม่ถูกต้อง
วิธีแก้ไข: ใช้ obj.style.height = imgObj.height + 'px' อย่างสม่ำเสมอ
20. ปัญหาการทำงานของตาราง คำอธิบายปัญหา: IE, Firefox และเบราว์เซอร์อื่นๆ มีการดำเนินการที่แตกต่างกันบนแท็กตาราง ซึ่งไม่ได้รับอนุญาตใน IE สำหรับการกำหนด innerHTML ของตารางและ tr เมื่อใช้ js เพื่อเพิ่ม tr การใช้เมธอด appendChild จะไม่ทำงาน
สารละลาย:
รหัสโปรแกรม
//เพิ่มแถวว่างลงในตาราง:
แถว var = otable.insertRow(-1);
เซลล์ var = document.createElement("td");
เซลล์.innerHTML = "";
เซลล์.className = "XXXX";
row.appendChild (เซลล์);
[หมายเหตุ] เนื่องจากฉันไม่ค่อยได้ใช้ JS เพื่อควบคุมตารางโดยตรง ฉันจึงไม่เคยพบปัญหานี้เลย ขอแนะนำให้ใช้เฟรมเวิร์ก JS เพื่อดำเนินการกับตาราง เช่น JQuery
21. ปัญหาการเยื้องของรายการ ul และ ol เมื่อกำจัดการเยื้องของ ul, ol และรายการอื่นๆ สไตล์ควรเขียนเป็น: list-style:none;margin:0px;padding:0px;
แอตทริบิวต์ Margin ใช้ได้กับ IE และแอตทริบิวต์ Padding ใช้ได้กับ FireFox ← ประโยคนี้แสดงไม่ถูกต้อง โปรดดูรายละเอียด ↓
[หมายเหตุ] ปัญหานี้ยังไม่ได้รับการยืนยันจริง และจะได้รับการแก้ไขหลังจากการตรวจสอบ
[หมายเหตุ] ได้รับการตรวจสอบว่าใน IE การตั้งค่าระยะขอบ: 0px สามารถลบการเยื้องด้านบน ล่าง ซ้ายและขวา ช่องว่าง และหมายเลขรายการหรือจุดของรายการได้ การตั้งค่า Margin:0px สามารถลบเฉพาะการเยื้องบนและล่างได้ หลังจากตั้งค่าการเว้นวรรค:0px แล้ว คุณยังต้องตั้งค่า list-style:none เพื่อลบหมายเลขรายการหรือจุด กล่าวอีกนัยหนึ่ง ใน IE สามารถตั้งค่าได้เฉพาะ Margin:0px เพื่อให้ได้เอฟเฟกต์สุดท้าย ในขณะที่ใน Firefox ต้องตั้งค่า Margin: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- รัศมีด้านบนขวา:4px;-moz-border-radius-bottomleft:4px;-moz-border- รัศมีล่างขวา:4px;.
[หมายเหตุ] ปัญหามุมโค้งมนเป็นปัญหาคลาสสิกใน CSS ขอแนะนำให้ใช้ชุดเฟรม JQuery เพื่อตั้งค่ามุมโค้งมนและปล่อยให้ปัญหาที่ซับซ้อนเหล่านี้ตกเป็นของผู้อื่น
มีปัญหามากเกินไปใน CSS และแม้แต่คำจำกัดความ CSS เดียวกันก็มีผลในการแสดงผลที่แตกต่างกันในมาตรฐานหน้าที่แตกต่างกัน คำแนะนำที่สอดคล้องกับการพัฒนาคือ ควรเขียนเพจโดยใช้มาตรฐาน DHTML มาตรฐาน โดยมีการใช้ตารางน้อยลง คำจำกัดความ CSS ควรยึดตาม DOM มาตรฐานให้มากที่สุด โดยคำนึงถึงเบราว์เซอร์กระแสหลัก เช่น IE, Firefox และโอเปร่า อย่างไรก็ตาม ในหลายกรณี มาตรฐานการตีความ CSS ของ FF และ Opera นั้นใกล้เคียงกับมาตรฐาน CSS และเป็นบรรทัดฐานมากกว่า