天天看點

萬惡的IE6,教你解決IE6下DIV

不單單DIV在IE6下會産生問題,其實是所有的塊級元素,比如P 也會受此影響,這個問題看似簡單,但如果在實際中遇到,旺旺會較勁腦筋也想不出問題所在。

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>

-->

繼續閱讀