ขนาดตัวอักษรเริ่มต้นภายใต้ IE6 อยู่ที่ประมาณระหว่าง 12-14px เมื่อคุณพยายามกำหนด div ที่มีความสูงน้อยกว่าค่าเริ่มต้นนี้ IE จะเชื่ออย่างหัวแข็งว่าความสูงของเลเยอร์นี้ไม่ควรน้อยกว่าความสูงของบรรทัดของแบบอักษร . ดังนั้นแม้ว่าคุณจะใช้ height: 6px; เพื่อกำหนดความสูงของ div สิ่งที่ปรากฏจริงภายใต้ IE ยังคงเป็นเลเยอร์ที่มีความสูงประมาณ 12 px
ในการแก้ปัญหานี้ คุณสามารถบังคับขนาดตัวอักษรของ div หรือกำหนดแอตทริบิวต์โอเวอร์โฟลว์เพื่อจำกัดการปรับความสูงของ div โดยอัตโนมัติ ตัวอย่างเช่น <div style="height: 6px; font: 0px Arial;"></div> หรือ <div style="height: 6px; overflow: Hidden;"></div> สามารถป้องกัน IE จากการฉลาดได้
ปัญหานี้ไม่มีอยู่ใน IE7/Firefox/Opera
<div style="height: 6px; overflow: Hidden;">มีปัญหาเมื่อแสดงใน Firefox เช่น:
<div id="idAnswer" class="ans_ques">
<div class="ans_ques_top"></div>
<div class="ans_ques_content">
<!--
<div class="ans_ques_bg_orange">
<h4>
<div class="ans_ques_h_bg">
<span>ฉันต้องการถามคำถาม</span>
<img src="templets/img/squid_ decoration.jpg" width="56" />
</div>
</h4>
<p>เราได้เปิดระบบยื่นปัญหาแบบบริการตนเองบนเว็บไซต์อย่างเป็นทางการของเราสำหรับคุณ และผู้เชี่ยวชาญด้านบริการลูกค้าของเราจะจัดการให้คุณโดยเร็วที่สุด! </p>
</div>
</div>
-->
<div class="ans_ques_bottom"></div>
</div>
คลาส ans_ques_top เป็นภาพพื้นหลังด้านบน และคลาส ans_ques_bottom เป็นภาพพื้นหลังด้านล่าง ผลลัพธ์ของการออกแบบนี้จะทำให้คลาส ans_ques_top เลื่อนไปทางขวา