IE6下的两个兼容问题调试

1. 鼠标知道一个图片上面，显示另一个图片，也就是 a:hover 的问题 在ie6中不兼容

<style>
.pic {
    width:200px;
    height:200px;
}    /*固定外层框的大小*/
.p2 {
    display:none;
} /*默认p1与p2都是显示的，不过p2溢出被隐藏了*/
.pic a{
    float:left;
    position:relative;    
    margin-right:10px;    
}
.pic a:hover {
    border:none;/*ie6  兼容*/
    _zoom:1;/*ie6  兼容 与border:none; 两种任意一种 就能实现ie6的hover兼容*/
}
.pic a:hover .p2 {
    display:block;
    position:absolute;
    left:20px;
    top:20px;
    z-index:1;
} /*鼠标指向时，p1隐藏，此时p2将随之被显示 */
</style>
<div class="pic"> 
    <a href="#">
          <img src="p1.png" />
          <div class="p2"><img src="p2.png" /></div>
    </a> 
    <a href="#">
          <img src="p1.png" />
          <div class="p2"><img src="p2.png" /></div>
    </a> 
    <a href="#">
          <img src="p1.png" />
          <div class="p2"><img src="p2.png" /></div>
    </a> 
</div>

如上面代码，就是在css中加上

.pic a:hover {
    border:none;/*ie6  兼容*/
    _zoom:1;
}

以上两个属性任留一种即可

2. ie6中div设置高度小于15px以下，高度默认为15px;

<div style="float:left;height:4px; width:50px; background-color:red;"></div>

这样除了ie6，其他浏览器的height均为4px；，但是id6高度是15px；加上 overflow:hidden; 即可正常