ie6 bug 收集

1.IE6中奇数宽高的BUG

IE6下查看，变成了right:1px的效果了：

IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。高度也是一样的
查看源码：

CSS代码:

#out {
　　width: 609px;/*这里宽度为奇数，bug就出现了！！改成偶数就OK了*/
　　height: 300px;
　　position: relative;
　　background:#FF0000;
　　color:#FFF;
}
#inn {
　　width: 200px;
　　height: 250px;
　　position: absolute;
　　top: 0px;
　　right: 0px;
　　background:#000000;
}

 

XML/HTML代码:

<div id=“out”>
    <div id=“inn”>此处为内部绝对定位的 DIV</div>
</div>

 

2.ie6下png透明问题

下载DD_belatedPNG.js文件. 在网页中引用,如下:

<!--[if lte IE 6]> 
<script src="Js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    DD_belatedPNG.fix('div, ul, img, li, input , a, .png_bg'); 
    /* 将 .png_bg 改成你应用了透明PNG的CSS选择器*/ 
</script> 
<![endif]--> 

3.IE6文字溢出BUG

在IE6下，浮动层之间有注释文字的话，之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制，但是代码里查看文字可并没有多出来。由注释造成文字溢出，属于IE6的BUG，溢出文字的字数=注释的条数*2-1，这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。

解决办法：
1、不放置注释。最简单、最快捷的解决方法；
2、注释不要放置于2个浮动的区块之间；
3、将文字区块包含在新的<div></div>之间
4、去除文字区块的固定宽度
5、在后面加一个<br />或者空格；（不推荐）
6、使用IE注释格式，如：<!–[if !IE]>Put your commentary in here…<![endif]–>
7、给盒子加position:relative;属性

引发这种BUG有几个条件
1.是注释引起的,删除所有注释即可.
2.hidden的input直接放在form下.
3.display为none的div也有可能引发此bug.
2,3可以通过外面再包一次DIV解决

4. li在IE中底部3像素的BUG（增加浮动解决问题）

在<li>上加float:left；当然根据设计稿的精神还要加个width:100%;

5.样式中文注释后引发失效

这是ie6 出现的奇怪现象。这是由于css 和html 的编码不同所引致。

满足下面条件就会引起 注释下面的样式不起作用：
1. css有中文注释
2. css为ANSI编码
3. html为utf-8编码

解决方法：
1. 去掉中文注释，用英文注释
2. 统一css 和 html 的编码

建议采用第二种解决方法
ps： css为uft-8  html 为ANSI 不会出现失效的情况。

 

6.链接伪类（:hover）CSS背景图片有闪动BUG

IE6下链接伪类（:hover）CSS背景图片有闪动BUG，主要原因ie会再一次请求这张图片，或者说图片没被缓存。

例如：

CSS代码
a:hover{background:url(imagepath)}  
常用的解决方案：

在页面底部添加以下IE6专用代码，让IE6缓存CSS背景图片至本地，这样a:hover时IE6就不会再重新向服务器请求加载背景图片了。

 

XML/HTML代码
<!–[if IE 6]>  
    <script type=”text/javascript”>  
        document.execCommand(”BackgroundImageCache”, false,         true);   
    </script>  
<![endif]–>  
  
或者

XML/HTML代码
  
<!–[if IE 6]>  
    <script type=text/javascript>        
        try {        
            document.execCommand(“BackgroundImageCache”, false, true);        
        } catch(err) {}        
    </script>  
<![endif]–>                                  

 

7.li在ie中底部空行的bug

3种解决方法：
a.就是在li a 样式中加入zoom:1；
b.就是在li 样式中加入display:inline ；
c.就是在li a 样式中加入width:100%或者一个宽度值；