by zhangxinxu 2009-08-24 20:40

css margin重叠的问题

margin:20px;
margin:20px;

重叠:蓝色的上20边距与灰色背景div的20上边距重叠;蓝色方块的下20像素边距与红色方块的上20像素布局重叠;红色方块的20像素的下边距与灰色盒子的20像素下边距重叠。

由于IE浏览器和非IE浏览器两大阵营对处理margin重叠问题上有较大差异,所以解决margin重叠问题一般是没有什么兼容性的好方法的。一般而言,想这里同向重叠异向重叠的情况同时出现还是比较少见的。在实际项目中遇到重叠只是一部分的重叠。重叠有利有弊,关键是你要了解什么情况下会发生margin重叠,深刻理解它,这样当你不希望发生重叠的时候可以避免出现重叠,希望利用这种重叠属性的就利用它,正所谓,知己知彼,百战百胜。

下面提出了些margin重叠的解决方案,但是这些方案都是有缺陷了,在IE浏览器和非IE浏览器下的表现是不一致的。这里仅供参考,拓展思路和理解,您可以想想更加好的解决方法。我个人观点认为最好的解决margin重叠的方法就是认识它,避免它!

margin:20px; float:left;
margin:20px; clear:both;
单个方块重叠的解决方法:1.浮动。在IE浏览器下(IE8未测过),浮动可以解决margin-top以及margin-bottom重叠的问题。而在Firefox火狐浏览器或是chrome谷歌浏览器下以及opera浏览器下,浮动只能解决同方向上的margin重叠问题。不同方向上的margin重叠的问题依旧存在。
margin:20px; 父标签overflow:hidden; zoom:1;
margin:20px; 父标签overflow:hidden; zoom:1;
同方向margin重叠的解决方法:1.与清除浮动的方法一致,给外部的box添加清除浮动相同的样式即可。常用的样式代码为:overflow:hidden; zoom:1;但是有问题的是,在IE浏览器下(未测试IE8),应用zoom属性后,似乎发生了水平方向上margin失效的情况。其他表现均一致。
margin:20px; 父标签padding:1px;
margin:20px; 父标签padding:1px;
同方向margin重叠的解决方法:2.增加些边缘属性。例如padding值,padding:1px;或是border属性,border:1px solid #cacbcc。此方法在非IE浏览器下效果良好,但是在IE浏览器下,表现很糟糕。