IE6下定义height高度异常,如何在IE6里定义高度小于18px的盒子

发现设置一条线的高度为height:2px,在IE6下却比正常显示的要高，FireFox下没问题。百度了下，现在把解决问题的文章转载如下：

你遇到过定义一个较小高度（比如height:5px）的盒子在IE6里却显示不止这个高度的情况吗？

看下面的代码:

HTML代码：

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

CSS代码：

*{
margin:0;
padding:0;
}
#box{
width:400px;
margin:5px;
overflow:hidden;
}
#left{
width:200px;
float:left;
background:#00f;
}
#right{
width:200px;
float:right;
background:#FF0000;
}

在4个浏览器中的效果图点击这里查看。

我们并没有给盒子定义高度，但IE6和IE7里却出现了高度，FF和opera正常。

给#left盒子加上height:5px后，效果图点击这里查看。

IE6没有变化，IE7#left盒子有了指定的高度，但#right还是有一个高度，FF和opera仍然正常。

再给#right盒子加上height:10px，效果图点击这里查看。

IE6依据没有变化。IE7正常了，FF和opera仍然正常。

IE7、FF和opera正常了，先把他们抛开，不理他们了，现在只看IE6，为什么IE6里的盒子明确定义了高度，它却不按指定的高度显示呢？它为什么始终显示那个高度？那个高度是多少呢？

我们增加#right盒子的高度，增加1px，也就是增加到11px，仍然没有变化，增加到12px、13px……直到增加到19px，终于有变化了，效果图点击这里查看。

由此可以断定那个高度是18px，也就是说在IE6里无法定义小于18px的高度（即使是0）；而IE7没有给盒子定义高度的话，也会有18px的高度。

什么原因呢？这是由于IE默认字体大小造成的。

解决的方法：

一、给盒子定义font-size:0属性；

二、给盒子定义overflow:hidden属性。

这样，在IE6、IE7、FF和opera里的效果就一样了。