天天看点

万恶的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>

-->

继续阅读