今天做前端的时候,发现设置一条线的高度为height:2px,在IE6下却比正常显示的要高,FireFox下没问题。百度了下,现在把解决问题的文章转载如下:
你遇到过定义一个较小高度(比如height:5px)的盒子在IE6里却显示不止这个高度的情况吗?
看下面的代码:
HTML代码:
<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里的效果就一样了。
转自----http://www.17css.com/%E5%A6%82%E4%BD%95%E5%9C%A8ie6%E9%87%8C%E5%AE%9A%E4%B9%89%E9%AB%98%E5%BA%A6%E5%B0%8F%E4%BA%8E18px%E7%9A%84%E7%9B%92%E5%AD%90/