一起CSS

当前位置:一起CSS > CSS > 文章正文

如何在IE6里定义高度小于18px的盒子

日期:2008-08-22 分类:CSS

你遇到过定义一个较小高度(比如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里的效果就一样了。

查看:689 评论:没有评论 标签:

相关日志

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved