ปัญหาความเข้ากันได้ของ IE6 ควรได้รับการพิจารณาในเค้าโครงหน้าเว็บ

รูปต่อไปนี้แสดงอัตราการดูเบราว์เซอร์ในรายละเอียดผู้เข้าชมในระบบสถิติเว็บไซต์และบัญชี IE6 มากกว่า 40% แม้ว่าจะมีเบราว์เซอร์หลายประเภท แต่เพียงอย่างเดียวก็มีหลายรุ่นเช่น IE5.5, IE6, IE7, IE8 ฯลฯ ในบรรดารุ่นไฮเอนด์เหล่านี้ IE6 ยังคงเป็นที่รักของผู้ใช้ส่วนใหญ่ดังนั้นเมื่อพิมพ์ IE6 ไม่ถือว่าเป็นปัญหาความเข้ากันได้ของ IE6

นี่คือ 10 ประเด็นที่ต้องให้ความสนใจใน IE6:

คุณต้องเพิ่มประเภท 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 - มีนิสัยใจคอมากพอ

การตั้งค่าตำแหน่ง: ญาติแก้ปัญหามากกว่าหนึ่งปัญหาโดยเฉพาะอย่างยิ่งเมื่อตั้งค่าการจัดตำแหน่ง เห็นได้ชัดว่าสิ่งหนึ่งที่คุณต้องเข้าใจคือการวางตำแหน่งสัมบูรณ์นั้นค่อนข้างพูด อาจเป็นเพราะคุณไม่มีการตั้งค่าและคุณไม่รู้ว่าทุกอย่างบินไปที่นั่น ตัวอย่างเช่นหากคุณออกแบบแต่ละบทความมีรูปภาพอยู่ก่อนหน้าและในที่สุดคุณจะพบว่ามีเพียงภาพเดียวในหน้าเว็บบางทีพวกเขาอาจทับซ้อนกัน

สิ่งนี้มีต้นกำเนิดมาจากข้อผิดพลาดที่มีชื่อเสียงของ IE6 Double Margin ตัวอย่างเช่นหากคุณออกแบบล่องลอยสำหรับ div และกำหนดระยะขอบซ้าย: 5px;, มันน่าจะเป็นระยะขอบซ้าย: 10px ใน IE6 ที่นี่ตั้งค่าการแสดงผล: อินไลน์สำหรับองค์ประกอบลอยตัวเพื่อแก้ปัญหา

ปัญหา IE6 (หรือ IE7) สามารถแก้ไขได้โดยการตั้งค่า Haslayout (ถ้าคุณไม่รู้ว่า Haslayout คืออะไรโปรดดูที่นี่)

วิธีที่ง่ายที่สุดในการกำหนดค่า Haslayout สำหรับองค์ประกอบคือการเพิ่มความสูงหรือความกว้างของ CSS (แน่นอนว่าการซูมสามารถใช้งานได้ แต่นี่ไม่ใช่ส่วนหนึ่งของ CSS) แนะนำให้ตั้งค่าเฉพาะค่า แต่บางครั้งก็ไม่ได้หมายความว่าความสูงคือ ที่นี่คุณอาจใช้ความสูง: 1% หากองค์ประกอบหลักไม่ได้ตั้งค่าความสูงความสูงทางกายภาพขององค์ประกอบจะไม่เปลี่ยนแปลง แต่มีคุณสมบัติ Haslayout อยู่แล้ว

เค้าโครงที่ซับซ้อนอาจทำให้ข้อความบางส่วนภายในองค์ประกอบลอยตัวปรากฏอยู่ใต้ตำแหน่งการทำความสะอาด นี่เป็นปัญหาที่แปลกและสิ่งต่อไปนี้สามารถช่วยคุณแก้ปัญหาได้:

•ตรวจสอบให้แน่ใจว่าการแสดงผล: อินไลน์ถูกตั้งค่าเป็นองค์ประกอบลอยตัว

•ใช้มาร์จิ้นขวา: -3px ในองค์ประกอบลอยตัว;

•เพิ่มความคิดเห็น IE หลังจากองค์ประกอบสุดท้ายขององค์ประกอบลอยตัวเช่น: <!-[ถ้า! ie]> ให้ความคิดเห็นของคุณที่นี่ ... <! [endif]->

•เพิ่ม div ลงในองค์ประกอบสุดท้าย (นี่คือการตั้งค่าความกว้างเป็น 90% หรือความสูงอื่น ๆ ที่คล้ายกัน)

อัปเดต: วิธีที่ง่ายที่สุดคือการลบความคิดเห็นทั้งหมด (ขอบคุณ Tian Wei'er สำหรับเคล็ดลับของเธอฉันไม่ได้พบมันเอง แต่หลังจาก googled ฉันพบว่าวิธีนี้สามารถแก้ไขได้และนี่เป็นวิธีที่แนะนำ)

คุณสามารถตรวจสอบคำอธิบายเพิ่มเติมเกี่ยวกับเรื่องนี้ใน positiveIseverything.net

6. ใช้โฮเวอร์ในแท็ก <a> เท่านั้น IE6 รองรับแท็ก <a> เพื่อแสดงสไตล์โฮเวอร์

แน่นอนคุณยังสามารถแก้วิธีนี้ผ่าน JS อย่างไรก็ตามนี่เป็นเรื่องเกี่ยวกับการเข้าถึง ขอแนะนำไม่ให้ตั้งเนื้อหาที่สำคัญในโฮเวอร์ที่ใช้งานโดยใช้ JS

ตัวอย่างเช่นความสูงขั้นต่ำสามารถหลีกเลี่ยงการใช้ CSS เพื่อให้เข้ากันได้กับ IE

#องค์ประกอบ {

ต่ำสุด: 20em;

ความสูง: อัตโนมัติ! สำคัญ;

ความสูง: 20em; /* ให้ IE6 แสดงความสูงนี้*/

-

IE6 ไม่สามารถระบุความสูงขั้นต่ำได้อย่างถูกต้อง คุณสามารถตั้งค่าความสูงคงที่เพื่อให้ IE6 สามารถแก้ไขได้เป็น 20EM ถึงกระนั้นก็จะเปลี่ยนความสูงเนื่องจากขนาดของเนื้อหา อีกวิธีหนึ่งคือการใช้ตัวเลือกขั้นสูง:

#องค์ประกอบ {

ต่ำสุด: 20em;

ความสูง: 20em;

-

/ * ละเว้น IE6 */

#Element [id] {

ความสูง: อัตโนมัติ;

-

สเกลจะทำให้เกิดความสับสน IE6 เว้นแต่คุณจะเพิ่มความสูงที่แน่นอนให้กับองค์ประกอบหลัก มิฉะนั้นเพิ่ม! สิ่งสำคัญสำหรับผู้อื่นเช่น:

ร่างกาย{

มาร์จิ้น: 2% 0! สำคัญ;

มาร์จิ้น: 20px 0; /* IE6 อ่านได้*/

-

อย่าลืมทดสอบก่อนและทดสอบบ่อยครั้งเว้นแต่ระดับของคุณจะเสร็จสมบูรณ์ มิฉะนั้นคุณอาจใช้เวลาในการแก้ปัญหามากขึ้น โดยทั่วไปหากเว็บไซต์ของคุณสามารถทำงานได้ดีภายใต้ IE6 และ Firefox ก็คาดว่าเบราว์เซอร์อื่นจะไม่มีปัญหาที่สำคัญ

ในหลายกรณีการแก้ปัญหาอาจใช้เวลามากกว่าการปรับแต่งรหัสของคุณใหม่