本文共 1349 字，大约阅读时间需要 4 分钟。
兼容性的第一条：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;
**兼容性的第二条：**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时，队首的元素，会双倍marign。
解决方案：
（1）使浮动的方向和margin的方向，相反。
所以，你就会发现，我们特别喜欢，浮动的方向和margin的方向相反。并且，前端开发工程师，把这个当做习惯了。
float: left; margin-right: 40px;
（2）使用hack：（没必要，别惯着这个IE6）
单独给队首的元素，写一个一半的margin：
ul li.no1{ _margin-left:20px;} PS：双倍margin的问题，面试经常问哦。
解决办法：不用管，因为根本就不允许用儿子踹父亲（即描述父子之间的距离，请用padding，而不是margin）。所以，如果你出现了3px bug，说明你的代码不标准。
转载地址：http://bomkk.baihongyu.com/