ie6 bug集锦

   IE6真是不让人省心，这个半标准的浏览器给我们带来很多额外的工作量，今天我找到了一些常见的IE6 bug，特记之。

1,记得在看一个整站制作的视频时，作者一直提到设定元素宽高时最好使用偶数，这样可以避免很多无缘无故的异常。如下面这个例子：

   html代码：    

<div id="out">
    <div id="inner">
    </div>
</div>

   css代码：

#out {
    width: 401px;
    height: 300px;
    position: relative;
     red;
}
#inner  {
    width: 200px;
    height: 200px;
    position: absolute;
    top:0;
    right: 0;
    background: green;
}

ie6下表现：

可以看到右边有空隙。

解决方法:

   宽高设为偶数即可

   

#out {
       width: 400px;
       height: 300px;
       position: relative;
        red;
    }

2，IE6文字溢出bug

   html代码：

<div style="width:200px;">
<div style="float:left;"></div>
<!--  -->
<div style="float:left;width:200px;">这是一头猪</div>
</div>

   

   bug现象：

   这是一头猪

   猪

   

   解决方法：

   1，<!-- 注释 -->写成<!--[if !IE]>注释<![endif]-->

   2,这个现象时第二个容器的宽度大于父容器的宽度，或者父容器宽度减去第二个容器宽度的值小于3时出现的，所以可以使这个条件不成立即可。

3，li在IE中底部3像素bug

   html代码：

<ul>
    <li><a href="#">第1条连接</a></li>
    <li><a href="#">第2条连接</a></li>
    <li><a href="#">第3条连接</a></li>
</ul>

  css代码：    

* {padding:0;margin:0;}
li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;}
li a:hover {background:#BBB;}

   bug现象：

   解决方法：

   在li中加display:inline

   

* {padding:0;margin:0;}
li { display:inline }
li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;}
li a:hover {background:#BBB;}