最近更新
阅读排行
关注本站

总结一下IE6的BUG

阅读:2668 次   编辑日期:2013-11-09

目录:

概述:

原来做PC前端的时候我们经常说一句话“珍爱生命,远离IE6”,因为IE6有很多独有的BUG,好在我现在做移动端了,不存在IE6的问题了。虽然我远离了,但是和它相伴的人还有不少,今天我们来介绍一下IE6中常见的BUG,因为我已经远离IE6大半年了,所以记得不是很全,大家如果还有欢迎大家补充。

双倍边距问题:

这个真是老生常谈,在IE6中,如果有两个并行的漂浮元素并且用了margin的话,会出现双倍margin值的问题,解决方法很多先几个常用的:
(1)给漂浮元素加样式:.uw3cClass{display:inline;}
(2)为IE6hack一下:.uw3cClass{margin-left:10px;_margin-left:5px;} .uw3cClass{display:inline;}
(3)在DOM结构允许的情况下,左边的用float:left,右边的用float:right;

关于固定定位:

position:fixed 这个样式有时候作用很大,尤其是在有浮动栏的时候,但是IE6中并不支持固定定位。

默认高度问题:

在IE6中,如果我们设置一个空白的DIV,会发现这个DIV会有一个默认的高度,因为IE6中有一个默认的字体大小,大致在 12 - 14px 之间,年迈的IE6会固执的认为这个层的高度不应该小于字体的行高,所以会出现这个问题。解决方法如下:
.uw3cClass{font-size:0px;}

图片下方出现空白间隙:

解决方法也很多,还是说几个常用的:
(1)设置图片为块级元素: .uw3cClass img{display:block;}
(2)把父元素的字体大小设置为0: .uw3cClass{font-size:0px;}
(3)设置图片的垂直对齐方式:vertical-align:top等等;

IE6中3像素问题:

如果两个漂浮容器挨着,在IE6中这两个容器之前会有3像素的间隙,解决办法也很简单,在之后漂浮的容器上面添加样式.uw3cClass{margin-left:-3px;}

不支持背景透明的PNG:

在IE6中背景透明的PNG是不能生效的,所以最好用矩形或者背景颜色,解决的方法也大致有这么几个:
(1)背景透明的PNG图片质量其实还是不错的,但是有时候我们为了方便,会为IE6用图片质量低一些的GIF图片:
    .uw3cClass{
        background:url("uw3c.png");
        _background:url("uw3c.gif");
    }
(2)上一种方法显然不够完美,用滤镜来解决显然比上面的方法要好:
    .uw3cClass{
        width:12px;
        height:12px;
        background:url(image/uw3c.png);
        _background:transparent none;
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/uw3c.png')
    }
(3)还有一种方法,就是使用JS插件。如果仅仅是几个页面需要PNG背景透明的话,那么还是选择第(2)种方法,但是如果需要大面积使用的话,使用插件也是可以考虑的,插件的名称叫做 —— DD_belated:
   DD_belatedPNG.fix('#uw3c img');

IE6中奇数宽高的BUG:

如果外面是一个奇数宽、相对定位的DIV1,里面是一个绝对定位的DIV2,那么就会出现里面绝对定位的DIV2距离右边会有1像素的距离,也暂时没有很好的解决办法,把外面的DIV2的宽度设置为偶数就可以了;
    //样式
    #DIV1{width:99px;position:relative;};
    #DIV2{width:50px;position:absolute;};
    //HTML
     <div id="DIV1" >
       <div id="DIV2" >
           ....
       </div >
     </div >
    //解决办法
    #DIV1{width:100px;position:relative;};
将本篇文章分享到:
top