主题:5个CSS中的BUG及其解决方案
 楼主 ljr1985 发表于2010年10月23日 上午9:58:29
5个CSS中的BUG及其解决方案

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.这样就能实现层垂直居中于浏览器的样式!

 

 1 zcefan 发表于2010年10月23日 下午6:45:53

学习啦。。。

 2 sunny123 发表于2010年10月28日 上午10:08:57

IE6 Bug遇到很多,感谢分享

 

 

奇新云平台
切换