IE6常见bug

1.png透明bug

png透明问题算是IE6下比较典型的bug，导致设计师和重构师放弃了很多很炫的效果。当然解决这个bug的方法也很多，最简单的就是通过滤镜来实现png透明。

     

           firefox                                                        IE6

滤镜代码：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled, sizingMethod=sSize, src=sURL);

属性说明:

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true : 默认值。滤镜激活； false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。crop : 剪切图片以适应对象尺寸。

image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。

scale : 缩放图片以适应对象的尺寸边界。

src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

注意：1.由于只针对IE6下应用滤镜，所以最好加上IE6的hack前缀

          2.通过滤镜对引入图片，滤镜引入图片的时候是相对于HTML文件，而不是相对于CSS文件，如:

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/test.png");

2.双边距bug

描述：在IE6下当元素的float浮动方向跟设置的margin的方向一致时，便会出现双边距bug。

<div class="box"></div>

body{ background:pink; margin-top:100px;}.box{ float:left; width:200px; height:150px; margin-left:100px; background:red; }

              

解决方法：将元素的display属性设置为inline即可。由于元素设置了浮动，所以即便display属性设置为inline也不会影响元素的显示方式。

3.3px偏移bug

描述:当浮动元素与非浮动元素相邻时，IE6下会3像素偏移。

<div class="div1"></div><div class="div2"></div>

body{ background:pink;margin-top:100px;}.div1{ float:left; width:100px; height:100px; background:blue;}.div2{ width:200px; height:100px; background:red;}

  

解决方法：

1.对另一个元素同时使用float

2.为已经浮动的div添加一条语句：margin-right:-3px;

4.最小高度bug

描述:当一个标签的height设置为小于21px(近似)，ie6下高度还是21px;

<div class="div1"></div>

.div1{ height:5px; background:blue;}

解决方法：css中 加上overflow:hidden;