代码改变世界

IE兼容性bug汇总

2013-09-29 19:27  youxin  阅读(345)  评论(0编辑  收藏  举报

1、IE6的双边距BUG.

    发生条件如果有元素是浮动元素,则该元素与它的父元素(一般是一个容器)直接相接触(中间不能隔着其他元素)的左或右的边距就会产生双倍边距,也意味着相邻的兄弟元素不可能会产生双倍边距,只有元素与其父元素之间才有可能产生双倍边距,产生双倍边距的那边是与其父元素相接触的那边

     解决方法给产生双倍边距的元素添加上 display:inline。

(上面的发生条件有点问题,一般是:

   一个div盒子如果设置了margin,并且该div设置了float浮动,那么在IE6下便会产生双边距问题:如果设置 float:left 那么左边距会是原来margin的两倍;如果是float:right,那么右边距会是原来margin的两倍。

意思就是同时要设置float和margin,并且float和margin方向相同才发生。

http://startwmlife.com/ie-bad-temper-double-margin-bug/

http://blog.csdn.net/speed_feng/article/details/8186839

 

) 

2、IE6的3px间隙BUG.

    生条件:属于兄弟关系的不浮动元素与浮动元素相邻时,会有3px的间隙,其中的不浮动元素也包括文本。

    解决办法:是给浮动元素设一个负边距,如margin-right:-3px

 

3、FF火狐浏览器margin-top BUG。

        BUG描述:比如两个嵌套的div元素,里面的div元素的margin-top会跑带外层的div元素中去,如果外层的元素也有margin-top,则两者不会叠加,而是取margin-top值较大的那个。其实这个是边距叠加造成的

       解决方法:给里面的div元素加上display:inline-block属性,或设置成绝对定位,或浮动都可以

4、当绝对定位的元素不显示的设置left、right、top、bottom的值时,它会就会出现在文档流中它本来该出现的地方。这时IE7及其以下版本会把这个绝对定位元素看成是inline元素,即使显示的设置了display为block,其他标准浏览器则会认为这个元素时block元素.