总结下IE6的BUG及解决办法

双倍边距问题

---

在IE6中，如果有两个并行的漂浮元素并且用了margin的话，会出现双倍margin值的问题

1. 给漂浮元素设置样式display:inline
2. 为IE6hack一下：margin-left:10px;_margin-left:5px;
3. 在DOM结构允许的情况下，左边的用float:left，右边的用float:right;

固定定位fix

---

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

默认高度问题

---

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

图片下方出现空白间隙

---

1. 设置图片为块级元素：img{display:block;}
2. 把父元素的字体大小设置为0：font-size:0
3. 设置图片的垂直对齐方式：vertical-align:top

IE6中3像素问题

---

如果两个容器挨着，一个浮动，一个不浮动，在IE6中这两个容器之间就会有3像素的间隙，解决办法：给漂浮的容器添加样式_margin-right:-3px;

不支持背景透明的PNG

---

在IE6中背景透明的PNG是不能生效的，所以最好用矩形或者背景颜色

1. 背景透明的PNG图片质量其实还是不错的，但是有时候我们为了方便，会为IE6用图片质量低一些的GIF图片：

   .box{
       background:url("bg.png");
       _background:url("bg.gif");
   }

2. 用滤镜来解决比上面的方法要好：

   .box{
       width:12px;
       height:12px;
       background:url("bg.png");
       _background:transparent none;
       _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg.png")
   }

3. JS插件。如果仅仅是几个页面需要PNG背景透明的话，那么还是选择第2种方法为好，但是如果需要大范围使用的话，使用插件是不错的选择，插件的名称叫做DD_belated:
   DD_belatedPNG.fix('#box img');