หัวข้อที่เรากำลังพูดถึงคือเค้าโครงหน้าเว็บ CSS ปัญหาที่ลำบากที่สุดสำหรับทุกคนคือความเข้ากันได้ของเบราว์เซอร์ แม้ว่า 52CSS.com จะนำเสนอความรู้มากมายในทิศทางนี้ แต่ก็ยังทำให้นักพัฒนาหลายคนสับสน -ความแตกต่างสามประการระหว่าง JavaScript และ JavaScript ใน IE และ Firefox ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคน
1. ปัญหา document.formName.item("itemName") คำอธิบายของปัญหา: ใน IE คุณสามารถใช้ document.formName.item("itemName") หรือ document.formName.elements ["elementName"]; ใน Firefox คุณสามารถใช้ได้เฉพาะ document.formName.elements["elementName"] .
วิธีแก้ไข: ใช้ document.formName.elements["elementName"] อย่างสม่ำเสมอ
2. ปัญหาเกี่ยวกับวัตถุคอลเลกชัน <br /> คำอธิบายปัญหา: ภายใต้ IE คุณสามารถใช้ () หรือ [] เพื่อรับวัตถุคอลเลกชัน สำหรับ Firefox คุณสามารถใช้ [ ] เพื่อรับวัตถุคอลเลกชันเท่านั้น
วิธีแก้ไข: ใช้ [] อย่างสม่ำเสมอเพื่อรับอ็อบเจ็กต์คลาสคอลเลกชัน
3. ปัญหาแอตทริบิวต์ที่กำหนดเอง <br /> คำอธิบายปัญหา: ใน IE คุณสามารถใช้วิธีการรับแอตทริบิวต์ปกติเพื่อรับแอตทริบิวต์ที่กำหนดเอง หรือคุณสามารถใช้ getAttribute() เพื่อรับแอตทริบิวต์ที่กำหนดเองได้ สำหรับ Firefox คุณสามารถใช้ได้เฉพาะ getAttribute( ) เพื่อรับคุณสมบัติแบบกำหนดเอง
วิธีแก้ไข: รับแอตทริบิวต์ที่กำหนดเองอย่างสม่ำเสมอผ่าน getAttribute()
4. ปัญหา eval("idName") <br /> คำอธิบายปัญหา: ภายใต้ IE คุณสามารถใช้ eval("idName") หรือ getElementById("idName") เพื่อรับวัตถุ HTML ด้วย id idName คุณสามารถทำได้ ใช้เฉพาะ getElementById ("idName") เพื่อรับวัตถุ HTML ที่มี id idName
วิธีแก้ไข: ใช้ getElementById("idName") อย่างสม่ำเสมอเพื่อรับอ็อบเจ็กต์ HTML ที่มี id เป็น idName
5. ปัญหาที่ชื่อตัวแปรเหมือนกับ ID ของวัตถุ HTML <br /> คำอธิบายปัญหา: ภายใต้ IE นั้น ID ของวัตถุ HTML สามารถนำมาใช้โดยตรงเป็นชื่อตัวแปรของวัตถุรองของเอกสาร แต่ไม่ใช่ภายใต้ Firefox; ภายใต้ Firefox มันสามารถใช้ได้กับวัตถุ HTML ชื่อตัวแปรที่มี ID เดียวกันไม่สามารถใช้ภายใต้ IE
วิธีแก้ปัญหา: ใช้ document.getElementById("idName") แทน document.idName เป็นการดีที่สุดที่จะไม่ใช้ชื่อตัวแปรที่มี ID อ็อบเจ็กต์ HTML เดียวกันเพื่อลดข้อผิดพลาด เมื่อประกาศตัวแปร ให้เพิ่มคีย์เวิร์ด var เสมอเพื่อหลีกเลี่ยงความคลุมเครือ
6. ปัญหา Const <br /> คำอธิบายปัญหา: สำหรับ Firefox คุณสามารถใช้คีย์เวิร์ด const หรือคีย์เวิร์ด var เพื่อกำหนดค่าคงที่ได้ สำหรับ IE คุณสามารถใช้คีย์เวิร์ด var เพื่อกำหนดค่าคงที่เท่านั้น
วิธีแก้ไข: ใช้คีย์เวิร์ด var สม่ำเสมอเพื่อกำหนดค่าคงที่
7. ปัญหาเกี่ยวกับแอตทริบิวต์ input.type <br /> คำอธิบายปัญหา: คุณลักษณะ input.type ภายใต้ IE เป็นแบบอ่านอย่างเดียว แต่แอตทริบิวต์ input.type ใต้ Firefox เป็นแบบอ่าน-เขียน
วิธีแก้ไข: ห้ามแก้ไขแอตทริบิวต์ input.type หากคุณต้องแก้ไข คุณสามารถซ่อนอินพุตดั้งเดิมก่อน จากนั้นจึงแทรกองค์ประกอบอินพุตใหม่ในตำแหน่งเดียวกัน
8. ปัญหา Window.event <br /> คำอธิบายปัญหา: window.event สามารถทำงานได้ภายใต้ IE เท่านั้น แต่ไม่สามารถทำงานภายใต้ Firefox ได้ เนื่องจากเหตุการณ์ของ Firefox สามารถใช้ได้เฉพาะในฉากที่เหตุการณ์เกิดขึ้นเท่านั้น
วิธีแก้ไข: เพิ่มพารามิเตอร์เหตุการณ์ให้กับฟังก์ชันที่เกิดเหตุการณ์ และใช้ var myEvent = evt?evt:(window.event?window.event:null) ในเนื้อหาของฟังก์ชัน (สมมติว่าพารามิเตอร์อย่างเป็นทางการคือ evt)
ตัวอย่าง:
ตัวอย่างซอร์สโค้ด [www.downcodes.com] <input type="button" onclick="doSomething(event)"/>
<ภาษาสคริปต์ = "จาวาสคริปต์">
ฟังก์ชั่น doSomething (evt) {
var myEvent = evt?evt:(window.event?window.event:null)
-
-
วิธีแก้ไข: var myX = event.x ? event.x : event.pageX; var myY = event.y ?
หากคุณพิจารณาคำถามที่ 8 ให้ใช้ myEvent แทน event
10. ปัญหา Event.srcElement <br /> คำอธิบายปัญหา: ภายใต้ IE วัตถุคู่มีแอตทริบิวต์ srcElement แต่ไม่มีแอตทริบิวต์เป้าหมาย ใน Firefox วัตถุคู่มีแอตทริบิวต์เป้าหมาย แต่ไม่มีแอตทริบิวต์ srcElement
วิธีแก้ไข: ใช้ srcObj = event.srcElement ? event.srcElement : event.target;
หากคุณพิจารณาคำถามที่ 8 ให้ใช้ myEvent แทน event
11. ปัญหา Window.location.href <br /> คำอธิบายปัญหา: ใน IE หรือ Firefox2.0.x คุณสามารถใช้ window.location หรือ window.location.href; ใน Firefox1.5.x คุณสามารถใช้ได้เฉพาะ window เท่านั้น ที่ตั้ง .
วิธีแก้ปัญหา: ใช้ window.location แทน window.location.href แน่นอน คุณยังสามารถพิจารณาใช้เมธอด location.replace() ได้
12. ปัญหาหน้าต่าง Modal และไม่ใช่ Modal <br /> คำอธิบายปัญหา: ภายใต้ IE หน้าต่าง Modal และไม่ใช่ Modal สามารถเปิดได้ผ่าน showModalDialog และ showModelessDialog ภายใต้ Firefox สิ่งนี้ไม่สามารถทำได้
วิธีแก้ไข: ใช้ window.open(pageURL,name,parameters) โดยตรงเพื่อเปิดหน้าต่างใหม่
หากคุณต้องการส่งพารามิเตอร์ในหน้าต่างลูกกลับไปที่หน้าต่างหลัก คุณสามารถใช้ window.opener ในหน้าต่างลูกเพื่อเข้าถึงหน้าต่างหลักได้ หากคุณต้องการหน้าต่างหลักเพื่อควบคุมหน้าต่างลูก ให้ใช้ var subWindow = window.open(pageURL,name,parameters); เพื่อรับวัตถุหน้าต่างที่เพิ่งเปิดใหม่
13. ปัญหาเกี่ยวกับเฟรมและ iframe <br /> ใช้เฟรมต่อไปนี้เป็นตัวอย่าง:
<frame src="http://www.downcodes.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 = "52css.com.html" หรือ window.frameName.location = "52css.com.html" ทั้งใน IE และ Firefox . เนื้อหาของเฟรม
หากคุณต้องการส่งพารามิเตอร์ในเฟรมกลับไปยังหน้าต่างหลัก คุณสามารถใช้คีย์เวิร์ดหลักในเฟรมเพื่อเข้าถึงหน้าต่างหลักได้
14. ปัญหาการโหลดเนื้อหา <br /> คำอธิบายปัญหา: วัตถุเนื้อหาของ Firefox มีอยู่แล้วก่อนที่เบราว์เซอร์จะอ่านแท็กเนื้อหาทั้งหมด ในขณะที่วัตถุของ IE จะต้องโหลดหลังจากที่เบราว์เซอร์อ่านแท็กเนื้อหาทั้งหมดแล้ว
[หมายเหตุ] ปัญหานี้ยังไม่ได้รับการยืนยันจริง และจะได้รับการแก้ไขหลังจากการตรวจสอบ
[หมายเหตุ] ได้รับการตรวจสอบว่าไม่มีปัญหาข้างต้นใน IE6, Opera9 และ FireFox2 สคริปต์ JS แบบธรรมดาสามารถเข้าถึงออบเจ็กต์และองค์ประกอบทั้งหมดที่ได้รับการโหลดก่อนสคริปต์ แม้ว่าจะยังไม่ได้โหลดองค์ประกอบก็ตาม
15. วิธีการมอบหมายเหตุการณ์ <br /> คำอธิบายปัญหา: ภายใต้ IE ให้ใช้ document.body.onload = inject; โดยที่ function inject() เคยถูกใช้มาก่อน; ใน Firefox ให้ใช้ document.body.onload = inject( );
วิธีแก้ไข: ใช้ document.body.onload=new Function('inject()'); หรือ document.body.onload = function(){/* นี่คือโค้ด */}
[หมายเหตุ] ความแตกต่างระหว่างฟังก์ชันและฟังก์ชัน
16. ความแตกต่างในองค์ประกอบหลักที่เข้าถึงได้ <br /> คำอธิบายปัญหา: ภายใต้ 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
ตัวอย่าง:
ตัวอย่างซอร์สโค้ด [www.downcodes.com] ถ้า(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "ข้อความของฉัน";
} อื่น{
document.getElementById('element').textContent = "ข้อความของฉัน";
-
19. ปัญหาการกำหนดความกว้างและความสูงของวัตถุ <br /> คำอธิบายปัญหา: ข้อความที่คล้ายกับ obj.style.height = imgObj.height ใน FireFox นั้นไม่ถูกต้อง
วิธีแก้ไข: ใช้ obj.style.height = imgObj.height + 'px';
20. ปัญหาการทำงานของตาราง <br /> คำอธิบายของปัญหา: IE, Firefox และเบราว์เซอร์อื่นๆ มีการดำเนินการที่แตกต่างกันบนแท็กตาราง ใน IE ไม่อนุญาตให้กำหนดตารางและ tr ภายใน เมื่อใช้ js เพื่อเพิ่ม tr การใช้ วิธีการ appendChild ไม่ทำงานเช่นกัน
สารละลาย:
ตัวอย่างซอร์สโค้ด [www.downcodes.com] //เพิ่มแถวว่างลงในตาราง:
แถว var = otable.insertRow(-1);
เซลล์ var = document.createElement("td");
เซลล์.innerHTML = "";
เซลล์.className = "XXXX";
row.appendChild (เซลล์);
21. ปัญหาการเยื้องของรายการ ul และ ol <br /> เมื่อกำจัดการเยื้องของ 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 เดียวกันก็มีผลในการแสดงผลที่แตกต่างกันในมาตรฐานหน้าที่แตกต่างกัน สำหรับความรู้เพิ่มเติม โปรดดูบทความบน 52CSS.com คำแนะนำที่สอดคล้องกับการพัฒนาคือ ควรเขียนเพจโดยใช้มาตรฐาน DHTML มาตรฐาน โดยมีการใช้ตารางน้อยลง คำจำกัดความของ CSS ควรยึดตาม DOM มาตรฐานให้มากที่สุดเท่าที่จะเป็นไปได้ โดยคำนึงถึงเบราว์เซอร์กระแสหลัก เช่น IE , ไฟร์ฟอกซ์ และโอเปร่า อย่างไรก็ตาม ในหลายกรณี มาตรฐานการตีความ CSS ของ FF และ Opera นั้นใกล้เคียงกับมาตรฐาน CSS และเป็นบรรทัดฐานมากกว่า 