ie6 bugs 及解决方法

（1）条件注释：

如：

<!--[if  Ite IE 6 ]>对IE6及IE6以下版本 <![endif]-->
<!--[if gte ie 6]>对ie6及ie6以上版本<![endif]-->
<!--[if gt ie 6]>对ie6以上，不包括ie6<![endif]-->

（2）css选择器

ie6不支持子选择器，先针对ie6使用常规申明的css选择器，然后再用子选择器针对ie6以上的其他版本，

如：

/*ie6*/
.content{background:#CCC;}
/*其他浏览器*/
div>p .content{background:#CCC;}

（3）png图片半透明问题

解决方案：
b)利用IE滤镜将IE6引入图片，滤镜引入图片是路径是相对于HTML文档本身，而不是相对于CSS文件，语法如下：   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="inke_dreamweaver.png");
代码写到这里，我们测试IE6还是没有透明，因为我们虽然设置了滤镜引入图片，但是background也同样加载了此图片，又因为background的图层比滤镜设置的高，所以才没有显示出来。   所以我们得出的结论就是当我们使用filter的时候，就要使background失效，因此我们可以使用CSSHack来解决此问题，   只需要将IE6的background:none;即可，那么可以得出的代码如下：
_background:none; /*此代码只有IE6识别*/
又因为filter只在IE6下让其产生作用，IE6+版本的浏览器虽然也识别filter，但是png透明是没有灰底问题的，所以我们同样将filter也加上IE6 Hack即可。   
c)最终我们可以得到如下代码：

#pics
{
background:url(../images/W3CfunsLogo.png) no-repeat; /*以下为IE6设置PNG透明代码*/
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="inke_dreamweaver.png"/>
}

注意：inke_dreamweaver.png是相对与当前html文件的路径，而不是与CSS文件的路径。
提示：如果需要使其支持链接的hover，那么需要在CSS中定义：cursor:pointer;使其呈现手型，否则将为默认的鼠标状态。

（4）ie6不支持css3的圆角属性，可以用图片圆角代替，或者直接放弃圆角。

（5）ie6背景闪烁

如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存，每次触发hover的时候都会重新加载，可以用JavaScript设置IE6缓存这些图片： 

document.execCommand("BackgroundImageCache",false,true); 

（6）最小最大高度

IE6 不支持min-height属性，但它却认为height就是最小高度。解决方法：使用ie6不支持但其余浏览器支持的属性!important。 

#container {min-height:200px; height:auto !important; height:200px;}

//直接使用ID来改变元素的最大高度 
var container = document.getElementById('container'); 
container.style.height = (container.scrollHeight > 199) ? "200px" : "auto"; 
//写成函数来运行 
function setMaxHeight(elementId, height){ 
var container = document.getElementById(elementId); 
container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto"; 
} 
//函数示例 
setMaxHeight('container1', 200); 
setMaxHeight('container2', 500);

（7）最小宽度 
同max-height和max-width一样，IE6也不支持min-width。 可以借鉴（6）的解决方法。

（8）双倍边距

当元素浮动时，IE6会错误的把浮动方向的margin值双倍计算。个人觉得较好解决方法是避免float和margin同时使用。 
（9）清除浮动 
如果你想用div(或其他容器)包裹一个浮动的元素，你会发现必须给div(容器)定义明确的height、width、overflow之中一个属性（除了auto值）才能将浮动元素严实地包裹。 

（10）3像素间距bug 
在IE6中，当文本(或无浮动元素)跟在一个浮动的元素之后，文本和这个浮动元素之间会多出3像素的间隔。
给浮动层添加 display:inline 和 -3px 负值margin 
给中间的内容层定义 margin-right 以纠正-3px 

（11）IE下z-index的bug 
在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative。 

（12）Overflow Bug 
在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。 

（13）横向列表宽度bug 
如果你使用float:left;把<li>横向摆列，并且<li>内包含的<a>（或其他）触发了 hasLayout，在IE6下就会有错误的表现。解决方法很简单，只需要给<a>定义同样的float:left;即可。 

（14）列表阶梯bug 
列表阶梯bug通常会在给<li>的子元素<a>使用float:left;时触发，我们本意是要做一个横向的列表(通常 是导航栏)，但IE却可能呈现出垂直的或者阶梯状。解决办法就是给<li>定义float:left;而非子元素<a>，或者 给<li>定义display:inline;也可以解决。 

（15）垂直列表间隙bug 
当我们使用<li> 包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素（<li>）之间添加空隙。 
解决方法：把<a>flaot并且清除float来解决这个问题；另外一个办法就是触发<a>的hasLayout（如定 义高宽、使用zoom:1;）；也可以给<li> 定义display:inline;来解决此问题；另外还有一个极有趣的方法，给包含的文本末尾添加一个空格。 

（16）IE6中的:hover 
在IE6中，除了(需要有href属性)才能触发:hover行为，这妨碍了我们实现许多鼠标触碰效果，但还是有一些法子是可以解决它的。最好是不要用:hover来实现重要的功能，仅仅只用它来强化效果。 

（17）IE6调整窗口大小的 Bug 
当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。解决办法：给body定义position:relative;就行了。 

（18）文本重复Bug 
在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。解决办法：给浮动元素添加display:inline;。