เมื่อเค้าโครง Div+CSS ของหน้าเป็นเรื่องปกติที่จะพบปัญหาของช่องว่างพิเศษในองค์ประกอบภาพ IMG ในเบราว์เซอร์เมื่อพบ IE6 (แน่นอนบางครั้งมันจะเกิดขึ้นภายใต้ Firefox) การแก้ปัญหานี้เป็นเรื่องของเวลาเช่นกัน ควรใช้วิธีแก้ปัญหาที่แตกต่างกันตามเหตุผลที่แตกต่างกัน ที่นี่เราจะสรุปวิธีการทั่วไปในการแก้แมลงในช่องว่างพิเศษภายใต้เค้าโครงภาพสำหรับการอ้างอิงของคุณ
1. แปลงรูปภาพเป็นวัตถุระดับบล็อก
นั่นคือตั้งค่า img เป็น: display: block;
ในตัวอย่างนี้เพิ่มชุดของรหัส CSS: #SUB IMG {display: block;}
2. ตั้งค่าการจัดตำแหน่งแนวตั้งของรูปภาพ
นั่นคือการตั้งค่าแอตทริบิวต์แนวตั้งของภาพขึ้นไปด้านบนตัวอักษรด้านล่างและด้านล่างสามารถแก้ไขได้ ตัวอย่างเช่นเพิ่มชุดของรหัส CSS ในตัวอย่างนี้: #SUB IMG {แนวตั้ง-จัดตำแหน่ง: top;}
3. ตั้งค่าขนาดข้อความของวัตถุพาเรนต์เป็น 0px
นั่นคือเพิ่มบรรทัดใน #SUB: ขนาดตัวอักษร: 0;
สามารถแก้ปัญหาได้ แต่สิ่งนี้ยังทำให้เกิดปัญหาใหม่และแม้แต่ข้อความในวัตถุแม่ก็ไม่สามารถแสดงได้ แม้ว่าส่วนข้อความจะถูกปิดล้อมขนาดข้อความของวัตถุย่อยยังคงสามารถแสดงได้ แต่มันจะแจ้งข้อผิดพลาดของข้อความที่เล็กเกินไปเมื่อ CSS ได้รับการตรวจสอบความถูกต้อง
4. เปลี่ยนคุณสมบัติของวัตถุหลัก
หากความกว้างและความสูงของวัตถุแม่ได้รับการแก้ไขและขนาดภาพขึ้นอยู่กับวัตถุแม่คุณสามารถตั้งค่า: ล้น: ซ่อน;
มาแก้มันกันเถอะ ดังในตัวอย่างนี้คุณสามารถเพิ่มรหัสต่อไปนี้เป็น #SUB: ความกว้าง: 88PX; ความสูง: 31PX; โอเวอร์โฟลว์: ซ่อน;
5. ตั้งค่าคุณสมบัติลอยตัวของรูปภาพ
นั่นคือเพิ่มบรรทัดของรหัส CSS ในตัวอย่างนี้: #sub img {float: left;}
หากคุณต้องการได้รับภาพผสมและการจัดเรียงข้อความวิธีนี้เป็นตัวเลือกที่ดี
วิธีนี้ควรเน้นว่าในการพัฒนาจริงวิธีนี้อาจทำให้เกิดความสับสนวุ่นวายเพราะเพื่อให้รหัสความหมายและลำดับชั้นมากขึ้นมันเป็นสิ่งที่หลีกเลี่ยงไม่ได้ที่จะให้การแสดงรหัสการเยื้องผ่าน IDE ซึ่งจะช่วยให้ฉลากและฉลากอื่น ๆ แสดงในบรรทัดเช่นการประยุกต์ใช้คำสั่ง ดังนั้นวิธีนี้สามารถช่วยให้เราเข้าใจสถานการณ์ที่เกิดข้อผิดพลาดและคุณต้องจัดการกับมันในโซลูชันเฉพาะ