IE6下預設的字體尺寸大致在12 - 14px 之間,當你試圖定義一個高度小於這個預設值的div 的時候, IE 會固執的認為這層的高度不應該小於字體的行高。所以即使你用height: 6px; 來定義了一個div 的高度,實際在IE 下顯示的仍然是一個12 px 左右高度的層。
要解決這個問題,可以強制定義該div 的字體尺寸,或是定義overflow 屬性來限制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向右偏移。