几个ie6样式兼容性：1px高的块容器、PNG透明图像、负边距时后遮盖前、边框不显示等问题

一、IE6下的1px高的块容器。

在工作中，美工经常会设计出1px高的线条来装饰页面。

如果是单色的线，可用border来实现，如果有渐变或者1PX的图案，那只好用盒容器加背景图了。

对于IE7及以上的浏览器和现代浏览器来说，实现起来很容易。

div .line{
    display:block;
    margin:30px;
    width:1000px;
    height:1px;
    background:url(../image/line01.png);
}

但是这样写，用蛋疼的IE6打开时，你会发现，你的苗条的1px线条被虐肿了，起码变得有20px的高度，已经肿得脱了型。这是因为IE6对1px高度的空容器不支持的缘故，IE6的默认属性在做怪。需要做hack。我们可以给它加一个文字，使它不再是空容器。

    <i class="line"> </i>

然后设置这个容器的文字属性font-size:0;line-height:1px;前面加上只有IE6能看的懂的半角下划线：_。

div .line{
    display:block;
    margin:30px;
    width:1000px;
    height:1px;
    background:url(../image/line01.png);
    _font-size:0;
    _line-height:1px;
}

OK，1px的苗条线回来了。

二、IE6下的PNG透明图像

复杂的做法是用filter，但貌似是无法进行图片定位。还有一种简单的方法就是把原图再导出一个gif格式的图片，质量肯定是不如PNG的质量好的，特别是边缘有透明效果时。但好在现在还在坚持用IE6的用户，要求都不是特别高。加下划线的属性是针对IE6的hack。

.top-tool .right i{
    display:block;
    width:16px;
    height:16px;
    background-image:url(../image/icon.png);
    _background-image:url(../image/icon.gif);
}

三、IE6下负边距时后遮盖前的问题。

意思是在文档流中，后面容器的背景图会遮挡前面容器的内容。文档流容器背景一般是低于同级容器的内容的，所以大部现代浏览器不会出现这种情况，但是神奇的IE出现了，经测试：主要是IE6和IE7有这种情况。解决方法是把前面的容器的定位属性position改为relative。因为有IE7，hack时前置符不能用下划线，要用*号，或者+号也可。

div1{
    *position:relative;
}

如果后面的容器也是相对定位的怎么办呢？既然相对定位，就非常好办了。只要z-index值小于前面的容器即可。

div1{
    *position:relative;
    *z-index:5;
}

div2{
    *position:relative;
    *z-index:1;
}

四、IE6下边框border不显示或显示不全的问题。

有时候，定义了border在IE6中不能显示，或时显时不显，可能通过给其父容器添加zoom属性来激活IE的haslayout来使其显示。

div1 {
    *zoom:1;
}

div1 h1{
    border:1px solid #abc;
}

PS：据统计，IE6的市场占有率还有1.2%，IE7的市场占有率1.3%，两者相加约为2.5%。真是个喜大普奔的好消息。