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