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,说明你的代码不标准;