IE6下常见兼容性总结

1.横向双边距bug

    * { margin:0; padding:0; }
    .box {
        float:left;
        margin-left:20px;
        width:200px;
        height:200px;
        background-color:red;
        /*加*/
        display:inline;
     }
    <!--布局-->
    <div class="box"></div>

bug产生原因：margin的方向与浮动的方向相同
解决方法：浮动的元素身上加 display:inline;

2.li下面多出的4px边距

* { margin:0; padding:0; }
ul {
    width:500px;
    margin:100px auto;
    background:green;
 }
li {
    list-style:none;
    overflow:hidden;
    width:100%;
    background:#39F;
    /*加*/
    vertical-align:top;
 }
.left {
    float:left;
    height:200px;
    width:200px;
    background:#F63;
 }
<!--布局-->
 <ul>
     <li><div class="left"></div></li>
      <li><div class="left"></div></li>
      <li><div class="left"></div></li>
      <li><div class="left"></div></li>
      <li> <div class="left"></div></li>
   </ul>

bug产生原因：li 中有浮动的元素
解决方法：li 加上 vertical-align:top;

3.单像素bug

* { margin:0; padding:0; }
.box {
    position:relative; 
    /*看这里*/
    width:501px;
    height:501px;
    margin:100px auto;
    background:red;
 }
h3 {
    position:absolute;
    right:0; bottom:0;
    width:100px; 
    height:100px; 
    background:#33C;
 }
<!--布局-->
<div class="box">
    <h3></h3>
</div>

bug产生原因：IE6 对于奇数定位支持的不是很好
解决方法：在设计初期就把宽高设置为偶数
1）字体大小为奇数之边框高度少1px;
解决方法：字体大小设置为偶数或line-height为偶数;
2）line-height，文本垂直居中差1px;
解决方法：padding-top代替line-height居中，或line-height加1或减1;
3）与父标签的宽度的奇偶不同的居中造成1px的偏离.
解决方法：如果父标签是奇数宽度，则子标签也用奇数宽度;如果是父标签偶数宽度，则子标签也用偶数宽度 .

4.最小高度

* { margin:0; padding:0; }
div {
    /*加*/
     overflow:hidden;
     height:0;
     width:200px;
     border:1px solid red;
 }
<!--布局-->
<div></div>

bug产生原因：IE6 下一个div有宽度，高度最小不是0而是字体大小
解决方法：给 div height:0; 并且 overflow:hidden;

5.子级撑开父级

* { margin:0; padding:0; }
div {
    /*加*/
    overflow:hidden;
    width:200px;
    height:200px;
    margin:100px auto;
    border:10px solid red;
 }
h3 {
    width:300px;
    height:300px;
    background:yellow;
 }
 <!--布局-->
 <div>
      <h3></h3>
 </div>

解决方法：给父级加 overflow:hidden;

6.IE6不支持子级margin值为负值

* { margin:0; padding:0; }
div {
     width:200px;
     height:200px;
     margin:100px auto;
     border:10px solid red;
 }
h3 {
     width:100px;
     height:100px;
     margin-left:-50px;
     background:#33C;
     /*加*/
     position:relative;
 }
<!--布局-->
 <div>
    <h3></h3>
</div>

解决方法: 子级身上加 position:relative;

7.3像素bug

* { margin:0; padding:0; }
div, h3 {
    width:200px;
    height:200px;
 }
div {
    /*加*/
    float:left;
    background:#06F; 
}
h3 { 
    /*加*/
    float:left; 
    background:#F90; 
}
<!--布局-->
<div></div>
<h3></h3>

解决方法：两个元素都浮动

8.line-height失效

* { margin:0; padding:0; }
ul {
     width:500px;
     margin:100px auto;
 }
li {
     list-style:none;
     height:60px;/*改*/
     line-height:50px;
     border:1px solid #000;
 }
/*加*/
input {
     height:16px;
     margin-top:22px
}
<!--布局-->
<ul>
    <li>
        <span>文字文字文字文字</span>
       <input type="text" />
   </li>
</ul>

bug产生原因：行内元素与行内块元素在同一行中，行内元素的line-height失效
解决方法：input 加 margin-top 等于 (父级高度-input高度)/2

9.png图半透明失效

 /*加*/
<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>   DD_belatedPNG.fix('.png');</script>
<![endif]-->
   <!--布局-->
   <img src="images/logo.png" class="png" >

解决方法：加一段只在IE6下执行的代码

10.注释bug

* { margin:0; padding:0; }
div {
    overflow:hidden;
    width:500px;
    margin:100px auto;
    border:1px solid red; 
}
span {
    float:left; 
    width:100%;
 }
  <!--布局-->
  <div>
      <span>ul li a span b strong</span>
      <!--注释注释注释注释注释注释-->
      <span>width height background</span>
      <span>width height background</span>
      <span>width height background</span>
      <span>width height background</span>
      <span>width height background</span>
      <span>width height background</span>
      <span>width height background</span>
</div>

bug产生原因： IE6下两个浮动元素，宽度都是width:100%，在浮动元素间加注释就会多出几个字；
解决方法：
a. 删除注释。但不彻底，浮动元素多了还是会出问题
b. 推荐：给元素加background:none;

11.不支持min-width

* { margin:0; padding:0; }
div {
    float:left; 
    min-width:200px;
    margin:100px auto;
    border:10px solid red;
    /*加*/
    _width:200px; 
    white-space:nowrap;
}
   <!--布局-->
   <div>文字文字</div>

解决方法:利用IE6子级能撑开父级的bug，给IE6加 _width:200px; white-space:nowrap;

12.伪类hover只支持a标签的使用

div:hover{ color:yellow;}
<!--布局-->
<div>文字文字</div>

解决方法：合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果；

13.select层级问题

* { margin:0; padding:0; }
select {
   width:100px;
    height:100px;
 }
div {
    position:absolute;
    top:0; left:0;
    width:200px; 
    height:200px; background:red;
 }
   <!--布局-->
   <select></select>
   <div></div>

解决方法：自己写一套 select 然后用 js 控制,原生的本来就不好看，且不容易修饰。

14.定位元素消失

.box {
     width:600px;
     height: 50px;
     color:#fff; 
     border: 1px solid red;
     zoom:1;
     position: relative; 
}
.box:after {
     display:block;
     content:'';
     clear: both; 
}
.box div {
     font-size:50px;
 }
.box1 {
     position:absolute;
     left:0; top:0;
     width:500px;
     height:50px;
     background:#f0f;
 }.box2 {
     overflow: hidden;
     display:inline;
     float:left;
     width:300px;
     height:30px;
     background:red;
 }
.box3 {
     overflow: hidden;
     display:inline;
     float:left;
     width:300px;
     height:30px;
     background:blue;
}
 <!--布局-->
 <div class="box"> 
     <div class="box1">box1</div>
     /*加*/
     <div></div>
     <div class="box2">box2</div>
     <div class="box3">box3</div>
 </div>

bug产生原因：IE6 下定位元素与浮动元素在同一个父级下紧挨着。定位的元素会消失;
解决方法：在定位元素与浮动元素之间放一个块标签即可解决。

15.ul+li+a做导航会掉下来

* { margin:0; padding:0; }
ul {
    overflow:hidden;
    zoom:1;
    background:red;
 }
li {
    display:inline;
    float:left;
    list-style:none;
    overflow:hidden;
 }
a {
    display:block;
    height:50px;
    line-height:50px;
    padding:0 50px;
    /*加*/
    width:100%;
 }
a:hover {
      background:blue;
      color:#fff;
    }
  <!--布局-->
   <ul class="clear">
      <li><a href="#">首页</a></li>
      <li><a href="#">身边团购</a></li>
      <li><a href="#">身边外卖</a></li>
   </ul>

bug 产生原因： a 标签没有 width,只有 padding 的时候,display:block就会出问题.
解决方法:给a标签加 width:100%;

16.ul浮动li不浮动

* { margin:0; padding:0; }
ul {
   display:inline;
   float:left;
   width:200px;
   border:1px solid red;
   }
li {
   display:inline;
   /*加*/
   float:left;
   width:100%;
   list-style:none;
}
  <!--布局-->
   <ul>
      <li><a href="#">新闻标题新闻标题新闻标题</a></li>
      <li><a href="#">新闻标题新闻标题新闻标题</a></li>
      <li><a href="#">新闻标题新闻标题新闻标题</a></li>
      <li><a href="#">新闻标题新闻标题新闻标题</a></li>
   </ul>

bug 产生原因： ul 浮动，li没有浮动
解决方法： li 也浮动

17.躲猫猫bug

.box{
     background:#0aa;
}
.float{
     float:left;
     border:1px solid #000;
}
.clear{
     /*加*/
     clear:both;
     border:1px solid red;
}
<!--布局-->
<div class="box">
   <div class="float">后面刮开有奖</div>
   <div class="float">再来一次</div>
   <div class="clear"></div>
</div>

bug产生原因:一个撑破了容器的浮动元素，如果在它之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到这些链接上时，在IE6下就会触发躲猫猫。
解决方法：
a.在未浮动的元素上添加clear: both;
b.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%。