IE6浏览器兼容分析

IE6兼容的选择器:

P/#box/.spec/div.box/div .box/div,.box/*

IE7开始兼容的选择器:

div>p /div+p

IE8开始兼容的选择器

div p:first-child;

div p:last-child;

第一,IE6,不支持小于12px的盒子,任何小于12px的盒子,在IE6中看都大;

 1)解决的办法:就是讲盒子的字号,设置小(小于盒子的高),比如0px;

     

2)IE6留有一个后门,就是只要css属性之前加上下划线,这个属性就是IE6认识的专有属性;

3)解决微型盒子的写法:

第二,IE6不支持overflow:hidden;来清除浮动

1)解决方法,以毒攻毒.追加一条:_Zoom:1;

完整写法:

注: 1)对zoom的深入了解就参考http://www.cnblogs.com/top5/archive/2011/07/11/2103343.html

      2)强调一点， overflow:hidden;的本意，就是溢出盒子的border的东西隐藏，这个功能是IE6兼容的。不兼容的是overflow:hidden;清除浮动的时候。

实例:

第三,关于margin的IE6兼容问题

1,IE6的双倍margin bug;

    1)当出现连续浮动的元素,携带和浮动方形相同的margin时,队首的元素,会双倍maigin;

实例:

     *解决方案:

　　　　　　　a,使浮动的方向和margin的方向,相反,所以我们就会发现,浮动的方向和margin的方向相反.

　　　　　　　　

　　　　　　　　b,使用hack          单独给队首的元素,写一个一半的margin;

　　　　　　　　　

第四,IE6的3px bug

      解决方法:不用管,因为根本就是允许用儿子踹父亲.所以,如果出现3px bug,说明你的代码不标准;