1.上下margin叠加
当两个垂直方向的边距碰到一起时,小的边距无效,谁的边距大与谁的一致。每当垂直方向的边距相接触时,当一个元素处在另一个元素里面时,边距也会重叠。当一个块状元素牌另一个块状元素中时,如果两个元素都指定了边距,那么两个元素的边距会重叠,变成一个边距。
解决方法:可以将两个对象设置为浮动。
2.双边距BUG
IE6或者更早版本有时会把已经应用到浮动元素上的一个边距尺寸翻倍。只有当边距与浮动的方向相同时才会出现这种问题-向左浮动元素上的一个左边距或者向右浮动的元素上的右边距。(注意,边距翻倍只有当元素的边距碰到它包含块的边沿时才会发生,因此当一个元素被浮动到左边靠到另一个左浮动的元素时,它的左边距不会翻倍)
解决方法:在浮动元素加上display:inline。
3.3PX的间隙
IE6和更早版本在一个浮动的列和一个非浮动的列之间插入一个额外的3PX的空间,这一间隙的准确位置取决于几个条件。
* 非浮动的列没有固定的宽度或者高度。如果与浮动相信的列没有定义任何尺寸,那么你会看到在这个列的边沿与其内部文本之间有个3PX缩进。这时样式影响还不是很严重。
* 非浮动的列有一个固定的宽度或者高度。当与浮动相邻的列有一个固定的布局尺寸时,又一个3PX的BUG出现了!
解决方法:第一种,首先必须削除非浮动的列的左边距。Margin-left:0;其次,必须设置浮动列的右边距为-3px
第二种,浮动所有的列。
4.消失的MARGIN-BOTTOM
这个问题出现在IE6中,其实这个margin-bottom并没有完全消失,只是IE6是按需显示的。
解决方法:清除浮动。
5.负边距布局
负边距布局方式很少用!如负值外补丁,如果块元素有固定大小,那么不会改变大小,只会产生位置,如果块元素没有固定大小,那么会改变块元素的实际大小。如果让页面元素垂直居中,margin设置为原width height的一半负值即可。如:一个层宽度是400,高度是300.使用绝对定位距离上部与左部都设置成50%。而margin-top的值为 -150。margin-left的值为-200.这样就能实现层垂直居中于浏览器的样式!