มีบทความดีๆ มากมายในต่างประเทศที่คุณสามารถเรียนรู้ได้ ดังนั้นฉันจึงตัดสินใจใช้เวลาในการแปลบทความเหล่านั้น ฉันไม่รู้ว่ามีใครแปลบทความนี้แล้วหรือยัง ชื่อเดิมคือ 10 Awful IE Bugs and Fixes ฉันหวังว่าจะมีคนอ่านบทความที่ยอดเยี่ยมเหล่านี้มากขึ้น ฝรั่งเป็นคนตลกมาก เลยอ่านหมดเลย ผู้เชี่ยวชาญใช้ทางอ้อม
ต่อไปนี้เป็นคำแปล :
ฉันได้ระบุ ข้อบกพร่อง IE ทั่วไป 10 รายการพร้อมวิธีแก้ไขแล้ว ฉันเชื่อว่าสิ่งนี้จะช่วยคุณลดเวลาที่คุณใช้ในการแก้ไขข้อบกพร่องของเลย์เอาต์ที่ไม่สอดคล้องกันใน IE
ผู้เขียน: เควิน
การแนะนำ
ทุกคนมีเรื่องราวของตัวเองเมื่อพูดถึงการจัดการกับ IE ในฐานะนักพัฒนา ฉันต้องจัดการกับนิสัยแปลกๆ ของ IE มากมาย และบางครั้งคุณก็แค่อยากจะเอาหัวโขกกำแพง แต่เมื่อเวลาผ่านไป เราได้เรียนรู้มากมาย (บางครั้งก็ไม่ใช่ความผิดของเรา แต่เป็นความผิดของ IE!) และเริ่มยอมรับและเข้าใจพฤติกรรมแปลกๆ ของ IE เราต้องทำสิ่งนี้เพราะยังมีผู้ใช้ IE6 จำนวนมาก สิ่งที่ดีที่สุดที่ควรทำคือทดสอบเว็บไซต์ของคุณจากเบราว์เซอร์ต่างๆ อย่างต่อเนื่องตั้งแต่ต้น การแก้ปัญหาเลย์เอาต์ตั้งแต่ต้นง่ายกว่ามากหลังจากแก้ไขโค้ด html และ css หลายพันบรรทัด
มีการเคลื่อนไหวมากมายที่ประท้วง IE6 โดยได้รับการสนับสนุนจากผู้เชี่ยวชาญเว็บส่วนใหญ่และผู้ใช้ทั่วไปที่ดูเหมือนจะไม่สนใจอะไรมากนัก แล้วตอนนี้เราทำอะไรได้บ้าง? เราต้องขุดต่อไปเพื่อแก้ไขปัญหากับ IE6 แต่เดี๋ยวก่อนมีข่าวที่น่าตื่นเต้น จากรายงานประจำเดือนของ w3cschool จำนวนผู้ใช้ IE6 ลดลงในช่วงหลายปีที่ผ่านมา จาก 60.3% ในเดือนมิถุนายน 2549 เป็น 13.6% ในเดือนกันยายน 2552 ตามอัตราส่วนนี้ เราควรจะละทิ้ง IE6 ได้ภายในสิ้นปี 2553 (คำอธิบายประกอบ: สถานการณ์ในต่างประเทศดีมาก~.~)
เอาล่ะ กลับมาสู่ความเป็นจริง ฉันได้จัดทำรายการปัญหาทั้งหมดที่ฉันเคยพบมาก่อนเพื่อใช้อ้างอิงในอนาคต ฉันเชื่อว่าสิ่งนี้จะช่วยคุณลดเวลาที่คุณใช้ในการแก้ไขข้อบกพร่องของเลย์เอาต์ที่ไม่สอดคล้องกันใน IE
1. ข้อความผี IE6 (ข้อผิดพลาดข้อความผี)
ก่อนที่ฉันจะเขียนบทความนี้ ฉันพบข้อผิดพลาดนี้ มันค่อนข้างแปลกและตลก ข้อความที่ซ้ำกันซึ่งมาจากที่ไหนเลยจะแสดงใกล้กับข้อความต้นฉบับโดย IE6 (คำอธิบายประกอบ: คุณยังสามารถอ้างถึง Bug ของอักขระที่ซ้ำกันของ Explorer 6 สำหรับการสาธิตข้อผิดพลาด) ฉันไม่สามารถแก้ไขได้ ดังนั้นฉันจึงค้นหามัน และแน่นอนว่ามันเป็นข้อบกพร่องของ IE6 อีกตัวหนึ่ง
มีวิธีแก้ไขปัญหามากมายสำหรับสิ่งนี้ แต่ไม่มีวิธีใดที่ได้ผลกับตัวอย่างของฉัน (ฉันไม่สามารถใช้บางวิธีได้เนื่องจากความซับซ้อนของไซต์) ฉันก็เลยใช้แฮ็ค การเพิ่มช่องว่างหลังข้อความต้นฉบับดูเหมือนจะช่วยแก้ปัญหาได้
อย่างไรก็ตาม ฉันได้เรียนรู้จาก Hippy Tech Blog ว่าสาเหตุของปัญหานี้เกิดจากแท็กความคิดเห็น HTML IE6 ไม่สามารถแสดงผลได้อย่างถูกต้อง นี่คือรายการวิธีแก้ปัญหาที่แนะนำของเขา:
สารละลาย :
2. ตำแหน่งสัมพันธ์และซ่อนโอเวอร์โฟลว์
ฉันพบปัญหานี้หลายครั้งในขณะที่ฉันกำลังเตรียมบทช่วยสอนเกี่ยวกับ JQuery เนื่องจากฉันใช้โอเวอร์โฟลว์ที่ซ่อนอยู่มากมายเพื่อให้ได้เลย์เอาต์ที่ฉันต้องการ
ปัญหาเกิดขึ้นเมื่อองค์ประกอบหลักโอเวอร์โฟลว์ถูกตั้งค่าเป็นซ่อน และองค์ประกอบลูกถูกตั้งค่าเป็นตำแหน่ง:ญาติ
CSS-Trick มีตัวอย่างที่ดีที่แสดงให้เห็นถึงข้อบกพร่องนี้ ตำแหน่ง: สัมพันธ์และล้นใน Internet Explorer
สารละลาย :
เพิ่มตำแหน่ง:ญาติ; ไปยังองค์ประกอบหลัก;
3. ความสูงขั้นต่ำสำหรับ IE
ง่ายมาก IE จะละเว้นแอตทริบิวต์ min-height คุณสามารถใช้แฮ็คด้านล่างเพื่อแก้ไขได้ ขอขอบคุณ: ดัสติน ดิแอซ .
โซลูชันนี้ทำงานได้ดีใน IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2
สารละลาย :
ตัวเลือก {
ความสูงขั้นต่ำ: 500px;
ความสูง:อัตโนมัติ !สำคัญ;
ความสูง:500px;
-