IE6 浏览器兼容

IE6，千万不要跟他死坑、较劲，它不配。 格调要高，我们讲IE6的兼容性问题，就是为了增加面试的成功率，不是为了成为IE6的专家。

 

兼容性1（微型盒子）

兼容性的第一条：IE6不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大。即：IE 6不支持微型盒子。

举个例子。我们设置一个height为 5px 、宽度为 200px的盒子，看下在IE 8和 IE 6中的显示效果：

​​​​

解决办法很简单，就是将盒子的字号大小，设置为小于盒子的高，比如，如果盒子的高为5px，那就把font-size设置为0px(0px < 5px)。如下：

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

我们现在介绍一下浏览器hack。hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。

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

比如说，我们给背景颜色这个属性加上下划线，就变成了​​_background-color: green;​​。效果如下：

​​

​​

于是乎，为了解决微型盒子（即height小于12px）的问题，正确写法：（注意不要忘记下划线）

height: 10px;
_font-size:0;

兼容性2

**兼容性的第二条：**IE6不支持用​​overflow:hidden;​​来清除浮动。

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

_zoom:1;

完整写法：

overflow: hidden;
_zoom:1;

实际上，​​_zoom:1;​​能够触发浏览器hasLayout机制。这个机制，不要深究了，因为只有IE6有。我们只需要让IE6好用，具体的实现机制，可以自行查阅。

需要强调的是，​​overflow:hidden;​​​的本意，就是让溢出盒子的border的内容隐藏，这个功能是IE6兼容的。不兼容的是​​overflow:hidden;​​清除浮动的时候。

总结：

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

属性1：

height:6px;
_font-size:0;

属性2：

overflow:hidden;
_zoom:1;

 

 

关于margin的IE6兼容问题

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：

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

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

PS：双倍margin的问题，面试经常问哦。

IE6的3px bug

​​

​​

解决办法：不用管，因为根本就不允许用儿子踹父亲（即描述父子之间的距离，请用padding，而不是margin）。所以，如果你出现了3px bug，说明你的代码不标准。