bug1:楼梯导航
HTML代码：
<ul>
<li><a href="#">list1</a></li>
<li><a href="#">list2</a></li>
<li><a href="#">list3</a></li>
<li><a href="#">list4</a></li>
</ul>
css样式
ul{list-style:none}
ul li a{width:130px; height:30px; color:#fff;background:#099;border:1px solid #3CF;float:left;margin:30px 10px;text-align:center;}
火狐等其他浏览器是这样的：
IE的效果是这样的：
解决方法：
1、设置li元件的float属性
ul li{float:left;
2、设置li元件的display:inline属性
ul li{display:inline}
bug2：IE下float元件的两倍空白（双边距bug）
html代码：
<div class="box1></div>
css代码：
.box{ background:#6CF; width:300px; height:100px; border:1px solid #36F; margin:30px 0 0 30px; float:left;}
火狐等浏览器下：
IE6下：
解决方法：
和上面那个bug的解决方案一样，设置display:inline属性可以解决问题。
.box1{background:#6CF; width:300px; height:100px; border:1px solid #36F; margin:30px 0 0 30px; float:left;display:inline;}
bug3：无法设置盒子微型高度
css代码：
.box1{width:200px;height:2px;border:1px solid #03F;background:#0CF;margin:30px 0;}
火狐等浏览器下：
IE6下效果：
解决方案：
1、这个bug的产生的原因很简单，IE不允许元件的高度小于字体的高度，所以下面的fix是设置字体的大小
css代码：
.box1{ width:200px; height:2px;border:1px solid #03F;background:#0CF;margin:30px 0;font-size:0;}
2、最佳解决方法还是使用overflow:hidden
bug4:设置overflow:auto属性IE盒子跨出边界
这个bug是很难看的，当父元件中使用了overflow的auto属性，并且在其里放入相关的元件，里面的元件会跨出来，下面是一个示例。
HTML代码：
<div class="box1">
<div class="box2"></div>
</div>
css代码：
.box1{ background:gray; border:1px solid #F60; width:300px; height:150px; margin:30px 0; overflow:auto;}
.box2{ background:gold; width:150px; height:175px; margin:30px; position:relative;}
火狐及其他浏览器效果：
IE浏览器效果：
解决方案：
为父元素设置position:relative;属性.
box1{ background:gray; border:1px solid #F60; width:300px; height:150px; margin:30px 0; overflow:auto;position:relative;}
bug5:设置IE6的min-height和min-width
IE6忽略了min-height和min-width这两个属性
HTML代码：
<div class="box">dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/>dsfdff<br/></div>
css代码：
.box{width:200px;background:#09F;min-height:150px;}解决方法：
1、加height：auto!important;height:150px;
.box{width:200px;background:#09F;min-height:150px;height:150px;height:auto!important}
2、
.box{width:200px;background:#09F;min-height:150px;height:150px;}
html>body .box{height：auto;}
3、增加_height属性
.box{width:200px;background:#09F;min-height:150px;_height:150px;}
bug6:IE6下float布局
使用无table的布局最重要的就是使用css的float元件。在很多情况下IE6处理起来好像在摸索阶段，有些时候，你会发现很多奇怪的行为。比如在其中有一些文本的时候。
HTML代码：
<div class="container">
<div class="element">http//:www.baidu.com</div>
<div class="anotherelement"></div>
</div>
css样式：
.container{background:#F39; border:1px solid #6CF; width:365px; margin:30px; padding:5px; overflow:auto;}
.element,.anotherelement{background:#09C; border:1px solid #F60; width:100px; height:150px; margin:30px; padding:10px; float:left;}
火狐及其他浏览器效果：
IE6的效果：
这个bug在IE6中还有一个双边距的问题
解决方案：
在两个div的样式中加针对IE6的_display:inline属性解决IE6的双边距问题，在第一个div的样式中添加overflow:hidden属性
具体如下：
.element,.anotherelement{background:#09C;border:1px solid #F60;width:100px; height:150px;margin:30px;padding:10px;float:left;_display:inline;}
.element{overflow:hidden;}
bug7:IE6下list列表中间的空行
HTML代码：
<ul> <li><a href="#">Link 1</a><li> <li><a href="#">Link 2</a><li> <li><a href="#">Link 3</a><li> <li><a href="#">Link 4</a><li> </ul>
css代码：
ul{list-style:none;margin:0;padding:0;}
ul li a{background:#36F;display:block;text-decoration:none;}
火狐等其他浏览器效果：
IE6下效果：
解决方案：
1、给a标签定义height来解决
li a{background:#36F;display:block;height:20px;}
2、给a标签定义一个浮动
li a{background:#36F;float:left;clear:left;}
3、在li上加上display:inline
li{display:inline;}