หนึ่งในสถิติที่แปลกประหลาดที่สุดเกี่ยวกับเบราว์เซอร์คือ Internet Explorer เวอร์ชัน 6, 7 และ 8 อยู่ร่วมกัน จากบทความนี้เวอร์ชัน Internet Explorer คิดเป็นประมาณ 65% ของส่วนแบ่งการตลาดทั้งหมด ในชุมชนการพัฒนาเว็บไซต์ตัวเลขนี้มีขนาดเล็กลงมากและสถิติแสดงให้เห็นว่ามีเพียงประมาณ 40%
ส่วนที่น่าสนใจของสถิติเหล่านี้คือค่าระหว่าง IE6, IE7 และ IE8 อยู่ใกล้มากซึ่งป้องกันไม่ให้เบราว์เซอร์ Microsoft เดี่ยวมีอำนาจเหนือกว่าอดีต ตามสถิติที่น่าเศร้าเหล่านี้เป็นสิ่งจำเป็นสำหรับนักพัฒนาในการทดสอบที่ครอบคลุมของเบราว์เซอร์ IE ที่ใช้ในปัจจุบันทั้งหมดเมื่อพัฒนาเว็บไซต์สำหรับลูกค้าและสิ่งนี้จะดึงดูดผู้ใช้มากขึ้นในโครงการส่วนบุคคล
ต้องขอบคุณไลบรารี JavaScript (เฟรมเวิร์ก) การทดสอบ JavaScript ข้ามเบราว์เซอร์นั้นใกล้เคียงกับที่สมบูรณ์แบบตามที่สถานการณ์ปัจจุบันอนุญาต แต่นี่ไม่ใช่กรณีในการพัฒนา CSS โดยเฉพาะสามเวอร์ชันที่อยู่ในปัจจุบันคือ
บทความนี้พยายามที่จะให้ข้อมูลอ้างอิงโดยละเอียดและใช้งานง่ายสำหรับนักพัฒนาต่าง ๆ ที่ต้องการเข้าใจการสนับสนุนของ CSS สำหรับ IE6, IE7 และ IE8 การอ้างอิงนี้มีภาพรวมและความเข้ากันได้ของสถานการณ์ต่อไปนี้:
A. หนึ่งในสามเบราว์เซอร์รองรับรายการ แต่อีกสองตัวไม่ได้
B. เบราว์เซอร์สองในสามตัวรองรับรายการ แต่อื่น ๆ ไม่รองรับ
บทความนี้จะไม่กล่าวถึง:
A. รายการที่ไม่ได้รับการสนับสนุนจากสามเบราว์เซอร์
B. คุณลักษณะส่วนตัว
ดังนั้นจุดสนใจของบทความนี้คือความแตกต่างระหว่างเบราว์เซอร์ทั้งสามแทนที่จะเป็นข้อบกพร่องในการสนับสนุนที่จำเป็น รายการแบ่งออกเป็นห้าส่วนต่อไปนี้:
1. ตัวเลือกและมรดก
2. คลาสหลอกและองค์ประกอบหลอก
3. การสนับสนุนแอตทริบิวต์
4. เทคโนโลยีอื่น ๆ
5. ข้อบกพร่องที่สำคัญและปัญหาความไม่ลงรอยกัน
1. ตัวเลือกและมรดก
A. การเลือกตั้งย่อย
ตัวอย่าง
| ร่างกาย> p { สี: #FFFF; - |
อธิบาย
ตัวเลือกเด็กเลือกองค์ประกอบของเด็กโดยตรงทั้งหมดขององค์ประกอบหลักที่เฉพาะเจาะจง
สนับสนุน
| IE6 ไม่ IE7 ใช่ IE8 ใช่ |
ข้อบกพร่อง
ใน IE7 หากมีความคิดเห็น HTML ระหว่างแท็กหลักและแท็กเด็กตัวเลือกเด็กจะไม่ทำงาน
B. โซ่
ตัวอย่าง
| .class1.class2.class3 { ความเป็นมา: #FFFF; - |
อธิบาย
คลาสลูกโซ่ใช้เพื่อส่งองค์ประกอบ HTML ที่มีการประกาศหลายชั้นเช่นนี้:
| <div class = "class1 class2 class3"> <p> เนื้อหาที่นี่ </p> </div> |
สนับสนุน
| IE6 ไม่ IE7 ใช่ IE8 ใช่ |
ข้อบกพร่อง
IE6 ดูเหมือนจะสนับสนุนสถานการณ์นี้เพราะสามารถจับคู่คลาสสุดท้ายในห่วงโซ่กับองค์ประกอบที่ใช้คลาสอย่างไรก็ตามมันไม่ได้ จำกัด องค์ประกอบที่ใช้คลาสทั้งหมดในห่วงโซ่
C. ตัวเลือกแอตทริบิวต์
ตัวอย่าง
| A [href] { สี: #0F0; - |
อธิบาย
ตัวเลือกนี้ช่วยให้องค์ประกอบอยู่ในตำแหน่งตราบเท่าที่มีคุณสมบัติที่ระบุ ในตัวอย่างข้างต้นแท็กทั้งหมดที่มีแอตทริบิวต์ HREF จะถูก จำกัด ในขณะที่แท็กที่ไม่มีแอตทริบิวต์ HREF จะไม่ จำกัด
สนับสนุน
| IE6 ไม่ IE7 ใช่ IE8 ใช่ |
D. ใกล้เข้ามา
ตัวอย่าง
| H1+P { สี: #f00; - |
อธิบาย
ตัวเลือกนี้จะหาแท็กพี่น้องที่อยู่ใกล้กับองค์ประกอบที่ระบุ ตัวอย่างข้างต้นจะ จำกัด แท็ก P แต่จะต้องเป็นพี่ชายของแท็ก H1 และต้องติดตามโดยตรงหลังแท็ก H1 ตัวอย่างเช่น:
| <H1> หัวเรื่อง </h1> <p> เนื้อหาที่นี่ </p> <p> เนื้อหาที่นี่ </p> |
ในรหัสข้างต้นสไตล์ CSS จะใช้งานได้สำหรับ p แรกเท่านั้น เพราะมันเป็นพี่ชายของ H1 และติดตาม H1 ทันที P ที่สองยังเป็นพี่ชายของ H1 แต่ไม่ได้ติดตาม H1 ทันที
สนับสนุน
| IE6 ไม่ IE7 ใช่ IE8 ใช่ |
ข้อบกพร่อง
ใน IE7 หากมีความคิดเห็น HTML ระหว่างพี่น้องตัวเลือกพี่น้องที่อยู่ติดกันจะไม่ถูกต้อง
E. ตัวเลือกพี่ชายสามัญ
ตัวอย่าง
| H1 ~ P { สี: #f00; - |
อธิบาย
ตัวเลือกนี้จะหาองค์ประกอบพี่น้องทั้งหมดตามองค์ประกอบที่ระบุ การใช้ตัวเลือกนี้กับตัวอย่างด้านบนจะใช้งานได้สำหรับแท็ก P ทั้งสอง แน่นอนถ้าองค์ประกอบ P ปรากฏขึ้นก่อน H1 องค์ประกอบ P นั้นจะไม่ถูกจับคู่
สนับสนุน
| IE6 ไม่ IE7 ใช่ IE8 ใช่ |