» 2009-9-12 13:02:18 已被归档于 Html/Css
前几天在做一个例子时.清除浮动时,发现在FF和IE中的完全不一样.
如下例:
在FF中的效果是导航条的border是条线(这就是没清除浮动的影响).
嘿嘿!清除浮动的方式有几种.但选择很重要.这就像选媳妇一样.一定要慎重.没有完美.只有适合不适合的!.
*******************************分隔线*********************
一:先用我经常用的:overflow:hidden;
结果:好了.浮动清除:导航条的border显示正常,但IE和FF有了更大的不同:绝对定位那块在FF中消失了.郁闷中.更加对神秘的overflow:hidden;纠结..
二:用:after
PS:这个是针对非IE浏览器
结果:浮动清除.FF和IE显示一样.应该说解决了.
三:添加标签
在和两个浮动的同级上添加一个标签(p或br)
结果:浮动清除.FF和IE显示一样.问题解决.不过多了几行代码.毕竟不喜欢.纠结- -!
四,haslayout
本例子中的#nav{width:100%;}已经触发了haslayout.可以再通过触发haslayout来解决
比如#nav{width:100%; height:22px;}
结果:FF和IE显示一样.
本文总结:
一般情况下,我还是喜欢用神秘的overflow来清除;不过就本例中情况看来以后要选择其它了.
如下例:
在FF中的效果是导航条的border是条线(这就是没清除浮动的影响).
嘿嘿!清除浮动的方式有几种.但选择很重要.这就像选媳妇一样.一定要慎重.没有完美.只有适合不适合的!.
*******************************分隔线*********************
一:先用我经常用的:overflow:hidden;
结果:好了.浮动清除:导航条的border显示正常,但IE和FF有了更大的不同:绝对定位那块在FF中消失了.郁闷中.更加对神秘的overflow:hidden;纠结..
二:用:after
PS:这个是针对非IE浏览器
#nav:after{
display: block;
clear: both;
content: "";
visibility:hidden;
height: 0;
}
结果:浮动清除.FF和IE显示一样.应该说解决了.
三:添加标签
在和两个浮动的同级上添加一个标签(p或br)
.clear {clear: both;}
结果:浮动清除.FF和IE显示一样.问题解决.不过多了几行代码.毕竟不喜欢.纠结- -!
四,haslayout
本例子中的#nav{width:100%;}已经触发了haslayout.可以再通过触发haslayout来解决
比如#nav{width:100%; height:22px;}
结果:FF和IE显示一样.
本文总结:
一般情况下,我还是喜欢用神秘的overflow来清除;不过就本例中情况看来以后要选择其它了.