CSS 浏览器兼容问题小总结（IE6）

• IE6不支持小于12px的盒子
• IE6不支持用overflow:hidden;来清除浮动
• IE6双倍margin bug
• IE6的3px bug

第一

IE6不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大
解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px。

     height: 4px;
    _font-size: 0px;

浏览器hack。CSS hack（根据不用的浏览器写不同的CSS），hack就是使用浏览器提供的后门，针对某一种浏览器做兼容。
IE6留了一个后门，就是只要给css属性之前，加上下划线，这个属性就是IE6认识的专有属性。

     比如：
     _background-color: green;

    //由于有下划线，所以高级浏览器不认识这个属性，不予以渲染

第二

IE6不支持用overflow:hidden;来清除浮动

 解决办法，以毒攻毒。追加一条
 overflow: hidden;
 _zoom:1;

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

这两个IE6的兼容问题，都是通过多写一条hack来解决的。这个我们称为伴生属性。

1、 IE6双倍margin bug

当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍marign。

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

解决方案：

1）使浮动的方向和margin的方向，相反。
最好习惯是浮动的方向和margin的方向相反。

		float: left;
		margin-right: 40px;

2）使用hack（没必要，别惯着这个IE6）
单独给队首的元素，写一个一半的margin

2、 IE6的3px bug

解决办法：
不用管，因为根本就不允许用儿子踹父亲。所以，如果你出现了3px bug，说明你的代码不标准。