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