日期:2014-05-17  浏览次数:20619 次

5个css布局的常见问题及解决方法

?

总结了5个关于css布局的常见问题,并附有解决方法,供参考。

?

1.float3像素问题及解决办法

当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了,所以对布局精度要求高的话,可以在float浮动容器样式里加针对IE6的属性”_margin-right””*html”,如:

#sidebar{ float:left; width:200px; _margin-right:-3px;}

或者

#sidebar{ float:left; width:200px;}
*html #sidebar{ margin-right:-3px;}

2.上边容器浮动后,下边的容器跟着浮动,造成页面错乱

如图中布局所示:footer必须要单独占一行,但当sidebar浮动后,content的高度小于sidebar的高度时,footer也跟着浮动到sidebar右侧了,造成页面错乱。解决办法是在maincontentfooter之间插入一个容器,设置样式

clear:both; height:0; font-size: 1px; line-height: 0px;clear:both清除,即可使页面正常

3.IE6float浮动导致双倍边距的bug

当页面