IE下div的异常高度显示解决

时间: 2010-8-28 - 分类: Html+CSS - 评论: 0 - 阅读: 908 次

先上图:

第一张为FF3,第二张为IE6,第三张为IE7,第四张为IE8.

FF3跟IE8下正常的效果,在IE6,7下却如此怪异,艹。

————-

似乎这样的问题很经常发生,这次要寻根究底找出问题原因跟解决的办法来。

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 下均不存在。

发表评论