IE6下DIV高度顯示的Bug收藏

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向右偏移。