炒冷饭系列之IE Bug(3) —— 极小高度

其实名字是我自己起的,暂且叫它“极小高度”吧。将一个盒子的高度设为很小的值,比如1px、2px的时候,为了展示得明显一点,我们为其添加一个实线的border,在IE6里会出现高度并不是自己所设置的那样小,跟现代浏览器有明显的差异。
html代码,很简单,就一个div

<div id="box"></div>


css代码

#box {
	width:100px;
	height:2px;
	border:2px solid #f66;
}

正常显示的效果应该是这样的:

正常显示效果

而IE6则会呈现这样的效果:

IE6的错误显示

IE6出现这个Bug的原因主要是在IE6内部渲染机制中规定,盒子模型的高度不能低于字体大小(font-size)的高度。IE6默认的font-size是16px(其实所有的浏览器都是这样默认值)。这时候我们可以给box设置个font-size:50px; 来看看效果。

高度增加了

果不其然,高度增加了,这就验证了我们得出的结论,罪魁祸首是font-size的值。

解决方法1:根据得出来的结论,直接添加:font-size:0; 成功解决。

解决方法2添加 overflow:hidden; 依然可以解决,具体原因不是特别清楚,也许是通过添加overflow触发了元素的haslayout属性。欢迎大家讨论!