浏览器兼容性

ie6 3pxbug

    <style type="text/css">  
    <!--  
      
    #left {  
     background-color: #E8F5FE;  
     border: 1px solid #A9C9E2;  
     float: left;  
     height: 300px;  
     width: 200px;  
    }  
    #right {  
     background-color: #F2FDDB;  
     border: 1px solid #A5CF3D;  
     height: 300px;  
    }  
      
    -->  
    </style>  
    <div id="left">左列</div>  
    <div id="right">右列</div>  

解决方法:

    #left {  
     background-color: #E8F5FE;  
     border: 1px solid #A9C9E2;  
     float: left;  
     height: 300px;  
     width: 200px;  
    _margin-right:-3px;  
    }  

ie6 双边距bug　　双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现

#div1{
 width:200px;
 height:200px;
 background:#900;
 margin:20px 0 0 20px;
 float:left;
}
#div2{
 width:300px;
 height:200px;
 background:#009;
 margin:20px 0 0 20px;
 float:left;
}

解决方法

#div1{
 width:200px;
 height:200px;
 background:#900;
 margin:20px 0 0 20px;
 float:left;
 display:inline;
}

注释：熟悉规则的人知道浮动元素自动设置为”block”元素，而不管他们之前是什么。故原理不解

ie:height 1px bug 　　IE6中的div默认有个最小字体高度

.a{
height:1px;
background-color:red;
}

解决方法

.a{
width:200px;
height:1px;
line-height:1px;
background:red;
}