รูปต่อไปนี้แสดงอัตราการดูเบราว์เซอร์ในรายละเอียดผู้เข้าชมในระบบสถิติเว็บไซต์และบัญชี IE6 มากกว่า 40% แม้ว่าจะมีเบราว์เซอร์หลายประเภท แต่เพียงอย่างเดียวก็มีหลายรุ่นเช่น IE5.5, IE6, IE7, IE8 ฯลฯ ในบรรดารุ่นไฮเอนด์เหล่านี้ IE6 ยังคงเป็นที่รักของผู้ใช้ส่วนใหญ่ดังนั้นเมื่อพิมพ์ IE6 ไม่ถือว่าเป็นปัญหาความเข้ากันได้ของ IE6
นี่คือ 10 ประเด็นที่ต้องให้ความสนใจใน IE6:
1. ใช้ doctypeคุณต้องเพิ่มประเภท doctype ที่ด้านบนของหน้า HTML แน่นอนว่าเวอร์ชันที่เข้มงวดมีมูลค่าการแนะนำเช่น:
<! doctype html สาธารณะ -// w3c // dtd html 4.01 // en
http://www.w3.org/tr/html4/strict.dtd>
หรือหน้า xhtml! doctype:
<! doctype html สาธารณะ -// w3c // dtd xhtml 1.0 เข้มงวด // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd>
สิ่งสุดท้ายที่คุณต้องการเห็นคือ IE6 เข้าสู่โหมด Quirk - มีนิสัยใจคอมากพอ
2. ตั้งตำแหน่ง: ญาติการตั้งค่าตำแหน่ง: ญาติแก้ปัญหามากกว่าหนึ่งปัญหาโดยเฉพาะอย่างยิ่งเมื่อตั้งค่าการจัดตำแหน่ง เห็นได้ชัดว่าสิ่งหนึ่งที่คุณต้องเข้าใจคือการวางตำแหน่งสัมบูรณ์นั้นค่อนข้างพูด อาจเป็นเพราะคุณไม่มีการตั้งค่าและคุณไม่รู้ว่าทุกอย่างบินไปที่นั่น ตัวอย่างเช่นหากคุณออกแบบแต่ละบทความมีรูปภาพอยู่ก่อนหน้าและในที่สุดคุณจะพบว่ามีเพียงภาพเดียวในหน้าเว็บบางทีพวกเขาอาจทับซ้อนกัน
3. ชุดจอแสดงผล: ค่าอินไลน์สำหรับองค์ประกอบลอยตัวสิ่งนี้มีต้นกำเนิดมาจากข้อผิดพลาดที่มีชื่อเสียงของ IE6 Double Margin ตัวอย่างเช่นหากคุณออกแบบล่องลอยสำหรับ div และกำหนดระยะขอบซ้าย: 5px;, มันน่าจะเป็นระยะขอบซ้าย: 10px ใน IE6 ที่นี่ตั้งค่าการแสดงผล: อินไลน์สำหรับองค์ประกอบลอยตัวเพื่อแก้ปัญหา
4. set haslayout สำหรับองค์ประกอบปัญหา IE6 (หรือ IE7) สามารถแก้ไขได้โดยการตั้งค่า Haslayout (ถ้าคุณไม่รู้ว่า Haslayout คืออะไรโปรดดูที่นี่)
วิธีที่ง่ายที่สุดในการกำหนดค่า Haslayout สำหรับองค์ประกอบคือการเพิ่มความสูงหรือความกว้างของ CSS (แน่นอนว่าการซูมสามารถใช้งานได้ แต่นี่ไม่ใช่ส่วนหนึ่งของ CSS) แนะนำให้ตั้งค่าเฉพาะค่า แต่บางครั้งก็ไม่ได้หมายความว่าความสูงคือ ที่นี่คุณอาจใช้ความสูง: 1% หากองค์ประกอบหลักไม่ได้ตั้งค่าความสูงความสูงทางกายภาพขององค์ประกอบจะไม่เปลี่ยนแปลง แต่มีคุณสมบัติ Haslayout อยู่แล้ว
5. แก้ปัญหาของอักขระซ้ำ ๆเค้าโครงที่ซับซ้อนอาจทำให้ข้อความบางส่วนภายในองค์ประกอบลอยตัวปรากฏอยู่ใต้ตำแหน่งการทำความสะอาด นี่เป็นปัญหาที่แปลกและสิ่งต่อไปนี้สามารถช่วยคุณแก้ปัญหาได้:
•ตรวจสอบให้แน่ใจว่าการแสดงผล: อินไลน์ถูกตั้งค่าเป็นองค์ประกอบลอยตัว
•ใช้มาร์จิ้นขวา: -3px ในองค์ประกอบลอยตัว;
•เพิ่มความคิดเห็น IE หลังจากองค์ประกอบสุดท้ายขององค์ประกอบลอยตัวเช่น: <!-[ถ้า! ie]> ให้ความคิดเห็นของคุณที่นี่ ... <! [endif]->
•เพิ่ม div ลงในองค์ประกอบสุดท้าย (นี่คือการตั้งค่าความกว้างเป็น 90% หรือความสูงอื่น ๆ ที่คล้ายกัน)
อัปเดต: วิธีที่ง่ายที่สุดคือการลบความคิดเห็นทั้งหมด (ขอบคุณ Tian Wei'er สำหรับเคล็ดลับของเธอฉันไม่ได้พบมันเอง แต่หลังจาก googled ฉันพบว่าวิธีนี้สามารถแก้ไขได้และนี่เป็นวิธีที่แนะนำ)
คุณสามารถตรวจสอบคำอธิบายเพิ่มเติมเกี่ยวกับเรื่องนี้ใน positiveIseverything.net
6. ใช้โฮเวอร์ในแท็ก <a> เท่านั้น IE6 รองรับแท็ก <a> เพื่อแสดงสไตล์โฮเวอร์
แน่นอนคุณยังสามารถแก้วิธีนี้ผ่าน JS อย่างไรก็ตามนี่เป็นเรื่องเกี่ยวกับการเข้าถึง ขอแนะนำไม่ให้ตั้งเนื้อหาที่สำคัญในโฮเวอร์ที่ใช้งานโดยใช้ JS
7. ใช้! ตัวเลือกที่สำคัญหรือขั้นสูงเพื่อแยกความแตกต่างของเบราว์เซอร์ IEตัวอย่างเช่นความสูงขั้นต่ำสามารถหลีกเลี่ยงการใช้ CSS เพื่อให้เข้ากันได้กับ IE
#องค์ประกอบ {
ต่ำสุด: 20em;
ความสูง: อัตโนมัติ! สำคัญ;
ความสูง: 20em; /* ให้ IE6 แสดงความสูงนี้*/
-
IE6 ไม่สามารถระบุความสูงขั้นต่ำได้อย่างถูกต้อง คุณสามารถตั้งค่าความสูงคงที่เพื่อให้ IE6 สามารถแก้ไขได้เป็น 20EM ถึงกระนั้นก็จะเปลี่ยนความสูงเนื่องจากขนาดของเนื้อหา อีกวิธีหนึ่งคือการใช้ตัวเลือกขั้นสูง:
#องค์ประกอบ {
ต่ำสุด: 20em;
ความสูง: 20em;
-
/ * ละเว้น IE6 */
#Element [id] {
ความสูง: อัตโนมัติ;
-
8. หลีกเลี่ยงขนาดการปรับขนาดสเกลจะทำให้เกิดความสับสน IE6 เว้นแต่คุณจะเพิ่มความสูงที่แน่นอนให้กับองค์ประกอบหลัก มิฉะนั้นเพิ่ม! สิ่งสำคัญสำหรับผู้อื่นเช่น:
ร่างกาย{
มาร์จิ้น: 2% 0! สำคัญ;
มาร์จิ้น: 20px 0; /* IE6 อ่านได้*/
-
9. ทดสอบให้เร็วที่สุดทดสอบบ่อยๆอย่าลืมทดสอบก่อนและทดสอบบ่อยครั้งเว้นแต่ระดับของคุณจะเสร็จสมบูรณ์ มิฉะนั้นคุณอาจใช้เวลาในการแก้ปัญหามากขึ้น โดยทั่วไปหากเว็บไซต์ของคุณสามารถทำงานได้ดีภายใต้ IE6 และ Firefox ก็คาดว่าเบราว์เซอร์อื่นจะไม่มีปัญหาที่สำคัญ
10. refactor รหัสของคุณในหลายกรณีการแก้ปัญหาอาจใช้เวลามากกว่าการปรับแต่งรหัสของคุณใหม่