您的位置:首页 > Web前端 > CSS

IE6下DIV最小高度不能为0的解决方法

2009-08-17 16:54 435 查看
   
在网页布局时常会用到 DIV 来显示一些边角背景,需要设置较小的高度,默认情况下,IE6 中设置 DIV 较小高度会不起作用,在
IE7、FF 等浏览器不存在这个问题。

   
IE6 下默认的字体尺寸大致在 12 - 14px 之间,当你试图定义一个高度小于这个默认值的 DIV 的时候, IE6
会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height:5px; 来定义了一个 DIV 的高度,实际在 IE6
下显示的仍然是一个 12px 左右高度的层。

   
要解决这个问题,可以强制定义该 DIV 的字体尺寸,或者定义 overflow 属性来限制 DIV
高度的自动调整。比如:

<div style="height:
5px; font: 0px Arial;
line-height:0;"></div>

或者

<div style="height:
5px; overflow:
hidden;"></div>

   
值得注意的是,设置 font-size:0 时这个容器的高度最小为 2px ,如果要设置 DIV 高度为 0 或 1px ,则需要使用
overflow:hidden; 来实现

实例:不能合拢的问题

1.问题如下:









 css代码如下:

 .zc_top
{//上边div

 height:6px;

 width:910px;

 background:url(images/zc_top.gif)
no-repeat;

 }

 .yd_body {//下边div

 color:#333;

 width:860px;

 padding:0 0 0 50px;

 background:url(images/zc_body.gif)
repeat-y;

 }

2.解决办法:在zc_top添加:overflow:hidden;

注:IE7不存在div有最小高度的问题
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  div ie url 浏览器 css