CSS ——浏览器兼容问题

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

解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px。

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

浏览器hack。hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。

IE6留了一个后门，就是只要给css属性之前，加上下划线，这个属性就是IE6认识的专有属性。

比如：

1 _background-color: green;

解决微型盒子，正确写法：

1 height: 10px; 2 _font-size:0;

第二，IE6不支持用overflow:hidden;来清除浮动的

解决办法，以毒攻毒。追加一条

1 _zoom:1;

完整写法：

1 overflow: hidden; 2 _zoom:1;

实际上，_zoom:1;能够触发浏览器hasLayout机制。这个机制，就IE6有。

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

这两个IE6的兼容问题，都是通过多写一条hack来解决的。

这个我们称为伴生属性。

1 height:6px; 2 _font-size:0;

1 overflow:hidden; 2 _zoom:1;

关于margin的IE6兼容问题

IE6双倍margin bug

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

1  <ul> 2  <li></li> 3  <li></li> 4  <li></li> 5  </ul>

 解决方案：

1）使浮动的方向和margin的方向，相反。

所以，你就会发现，我们特别喜欢，浮动的方向和margin的方向相反。并且，前端开发工程师，把这个当做习惯了。

1  float: left; 2  margin-right: 40px;

2）使用hack（没必要，别惯着这个IE6）

单独给队首的元素，写一个一半的margin

1 <li class="no1"></li>

1 ul li.no1{ 2  _margin-left:20px; 3 }

IE6的3px bug

解决办法：

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