最初开发的时候是在IE10上开发，并简单测试firefox，当开发完在IE6上兼容性测试时，一打开就傻眼了，所有的页面就没有能看的。

整整用了两天的时间对应所有IE6，记录下来方便自己以后查询，也方便大家参考。

（个人认为之所以出现IE6的问题，很少一部分原因在于IE6的解析的不同，而主要的原因还在于个人开发时使用的css以及布局并不是最优的，开发时只是单纯的实现效果。）

?

先说明IE6一些本身的问题：

1.jpg的透明图片在IE6下失去透明效果

.banner_prev
{
??? left:22px;
??? background:transparent url(../images/narrow_prev.png) no-repeat;
??? _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/narrow_prev.png");/*IE6有效*/
??? _background:none;/*IE6有效*/
}

解决方法是添加IE6的滤镜，采用hack，_和*效果一样IE6都可以识别，而更高的版本以及别的浏览器不识别。

2.png的<img>标签的图片在IE6下被自动添加了纯色的背景。

正常效果

IE6的效果

? 解决方法是下载链接http://down.51cto.com/data/1033182的文件，该文件是我上传的，不需要下载豆，免费下载。

将该js文件引用，并添加如下代码

<!--[if IE 6]>
<script src="../js/DD_belatedPNG.js"></script>
<script>
$(document).ready(function () {
DD_belatedPNG.fix('.png, img');
})
</script>
<![endif]-->

代码中的“.png”为固定写入，“img”代表<img>标签，也可以是.class或#id

3.margin-left的双倍边距

举个例子

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

第一种情况：所有的li都左浮动，但每行只显示两个，这样就会出现li自动换行，如果此时设置li的margin-left，则在IE6下出现的效果是margin-left为

设置的值得2倍。

这是因为在IE6下如果有浮动且换行了，那么第一个浮动元素的margin-left就会变成双倍。

第一种情况：如果一个非block的元素，你设置成block显示，则第一个元素margin-left也会出现双倍的问题。

两种情况的解决方法都是是 将li（即第一个元素）的dispaly设置为display:inline;?? 或者不是用li的margin-left而是用ul的padding-left

4.IE6的layout问题

在IE6中浮动会有一定的问题，而此时需要出发IE6的layout，

可以对父元素增加width：XXX，或height：XXX或float：XXX或zoom：1

其中zoom：1为最常用的方法。

在IE7下zoom：1没有效果，需要添加width：100%；

5.IE6对css选择器的支持

此处说的css选择器不是