第一，IE6, 不支持小于12px的盒子, 任何小于12px的盒子, 在IE6中看都大
解决办法很简单, 就是将盒子的字号, 设置小(小于盒子的高), 比如0px。
height: 4px;
_font-size: 0px;我们现在介绍一下浏览器hack。hack就是"黑客", 就是使用浏览器提供的后门, 针对某一种浏览器做兼容。
IE6留了一个后门, 就是只要给css属性之前, 加上下划线, 这个属性就是IE6认识的专有属性。
比如：
_background-color: green;第二，IE6不支持用overflow:hidden;来清除浮动的
解决办法, 以毒攻毒。追加一条
_zoom:1;完整写法：
overflow: hidden;
_zoom:1;实际上, _zoom:1; 能够触发浏览器hasLayout机制。这个机制, 不要深究了, 因为就IE6有。我们只需要让IE6好用, 具体的实现机制, 有兴趣的同学, 自行百度。
强调一点, overflow:hidden;的本意, 就是溢出盒子的border的东西隐藏, 这个功能是IE6兼容的。
不兼容的是overflow:hidden;清除浮动的时候。
我们刚才学习了两个IE6的兼容问题, 这两个IE6的兼容问题, 都是通过多写一条hack来解决的。
这个我们称为伴生属性。
height:6px;
_font-size:0;
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;
*{
margin: 0;
padding: 0;
}
ul{
border: 1px solid #000;
height: 100px;
list-style: none;
}
ul li{
float: left;
width: 120px;
height: 40px;
margin-left: 40px;
background-color: orange;
}
ul li.no1{
margin-left:20px;
}
<ul>
<li class="no1"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>2)使用hack(没必要, 别惯着这个IE6)
单独给队首的元素，写一个一半的margin
<li class="no1"></li>ul li.no1{
_margin-left:20px;
}
IE6的3px bug
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
background-color: orange;
}
div p{
margin-right: 10px;
float: right;
width: 100px;
height: 100px;
background-color: green;
}
<div>
<p></p>
</div>绿色儿子, 右浮动, 用margin-right踹了脚父亲, 结果IE6中多了3px。比如本来是margin-right：10px; 结果是13px
IE6, 千万不要跟他死坑、较劲, 不是为了让你成为IE6的专家, 是为了提高面试的成功率。