IE6 部分bug

1.双边距：margin方向与浮动方向一致

           浮动的元素添加   display: inline;

 

2.注释： 原因：

        IE6 下 两个浮动元素，宽度都是width:100%

        在浮动元素间加注释就会多出几个字

        解决：

        1. 删除注释。但不彻底，浮动元素多了还是会出问题

        2. 推荐：给元素加background:none;

      span{

            float: left;

            width: 100%;

            background: none;

        }

 

 

3.min-width：

          min-width:200px;

添加     _width:200px;

            white-space:nowrap;

 

 

4.仅支持a标签hover，其他标签不支持

 

5.select层级问题（层级比较大）

  解决方法：

  写一套 select 然后用 js 控制

  原生的本来就不好看，而不容易修饰

 

6.img边框和空白

img {

  display:block;

  border:none;

}

 

 

7.子级定位高100%

给定位的元素_height:9999px; 然后父级加上_overflow:hidden;

 

 

8.父级右浮动子集左浮动

出问题的原因：给左浮动的父级清除浮动了，并且父级没有浮动

解决方法也简单：去掉.nav（父级） 上面的zoom:1;（取消父级的清除浮动）

但是这样的做的话相当于没有清除浮动，咱们可以给.nav 的父级（外面再添加一个父级）清除浮动

.clear,.nav{

  zoom:1;

}

 

 

9.定位元素消失

IE6 下，定位元素与浮动元素在同一个父级下紧挨着。定位的元素会消失

解决方法：

在定位元素与浮动元素之间放一个块标签即可解决。

 

10.父级宽度百分百（）

a宽度100%，不是以父级为基准，可能找到祖先元素

解决：设置父级具体宽度

 

 

 

11.ul+li+a导航掉下来

a 标签没有 width ，只有 padding 的时候，display:block就会出问题（inline-block也不可以）

 

 

12.li下面多出的边距

 li 中有浮动的元素

  解决方法：li 加上 vertical-align:top;

 

13.ul 浮动，li没有浮动

解决方法： li 也浮动

 

 

14.单像素bug

bug产生原因： IE6 对于奇数定位支持的不是很好

解决方法：在设计初期就把宽高设置为偶数

 

15.最小高度

bug产生原因：IE6 下一个div有宽度，高度最小不是0而是字体大小

解决方法：给 div height:0; 并且 overflow:hidden;

 

16.子级撑开父级

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

（IE6可以撑开，加overflow:hidden;）

 

17.不支持子级的margin负值（左边超出部分不显示）

子级身上加 position:relative;

 

 

18.3像素bug??

两个元素都浮动就好

 

 

19.line-height失效（文字和input都会失效）

产生原因：行内元素与行内块元素在同一行中，行内元素的line-height失效

 

  解决方法：input 加 margin-top 等于 (父级高度-input高度)/2

 

20.png半透明失效

 

躲猫猫

修复躲猫猫 Peekaboo Bug几种方法：

● 不要在父容器div#box里面使用背景，或者保持div#clear和div#float在一起，不要隔开

● 给父容器div#box一个明确的“宽度”或“高度”，哪怕_height:1%;，或者如下

#box {

_height: 100%; /* 修复躲猫猫 */

}

● 把父容器div#box和浮动元素div#float的定位类型positon都设置为“相对”rellative