IE6下定义height高度异常,如何在IE6里定义高度小于18px的盒子
2012-08-03 08:50
190 查看
今天做前端的时候,发现设置一条线的高度为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里的效果就一样了。
转自----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/
你遇到过定义一个较小高度(比如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里的效果就一样了。
转自----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/
相关文章推荐
- -_-#【兼容】如何在ie6里定义高度小于18px的盒子
- 主流浏览器下 定义小于18px高度属性height的盒子再次测试 使用overflow解决问题
- IE6下,CSS如何定义小于10像素的div高度
- ie6 定义高度小于12px的div
- IE6如何定义1px左右高度的容器?
- ie6中的div有默认高度,当定义一div小于其默认高度时,ie6仍会呈现div的默认高度,解决方法
- IE6 IE5.5 DIV height 小于20px不起作用
- 解决在IE6、7中用height来设定SELECT标签高度无效的兼容性问题
- IE6下a标签无法点击bug----position和定义的宽度和高度
- 如何设置不同组section的的头部高度?tableView heightForHeaderInSection
- 让IE6也有最小高度min-height的效果
- 定义float:left;后height不自适应高度
- CSS line-height:XX在IE7下面与IE6、IE8、FireFox高度不一样
- min-height最小高度的实现(兼容IE6、IE7、FF)
- IE6不支持最小高度min-height时
- css在firefox及IE6中最小高度如何设置
- 【min-height】最小高度 IE6、7、FF
- 要想在ie6,ie7和ff中都可以自适应高度,正确的做法是设置min-height和用cssHack设置height
- asp.net 中如何得到图片的高度(height)和宽度(width)以及生成图片的缩略图 C#
- 自定义异常时如何定义checked异常和unchecked异常