IE6兼容性大全
相信从事前端开发的朋友对IE6都是深恶痛绝，恨不得先杀后J，然后再大卸八块以解心头只恨。虽然是这么可恶的一个浏览器，但是IE6迄今为止的市 场占有率仍然很高，截止2009年8月份的市场占有率仍然有25%之多。那么今天创意灵犀通过翻译国外的译文对IE6的兼容问题进行总结概括。难免有疏漏 之处，如若您有更好的建议，欢迎在回复中提出，我会及时加以补充。
1.前言：
考虑浏览器的兼容性，我们要做的首先一定要简洁，如果你的布局太复杂，兼容性就更加难以做到。
其次，我们要实用合适的文档声明，因为没有声明的情况下，IE6会出现很多怪异的问题。W3CSCHOOL指出，XHTML1.0中文档声明包括以 下三种：Frameset(框架型)、Transitional(过渡型)、Strict(严格型) 。而loose为HTML4.01的类型，并非 XHTML的类型。我们最常用的通常是过渡型，示例代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
第三，当我们完成制作的时候要记得验证我们的代码，有些人认为校验代码没有任何实用价值，但我不这么认为。校验仅仅只需花费一点点时间，而且将受益于所有浏览器而非仅仅IE6；验证确保了向后兼容并且易于维护。至少也得验证XHTML！
第四，实用渐进增强，即在适当的时候保留一些不兼容浏览器的基本功能，至少不影响用户体验到网站要表现的内容。
最后是如何测试我们的网站，在FF下我们可以使用功能强大的Firebug，可以方便的对网站的CSS及网站结构进行精确快速的运行时查看，甚至对JS设置断点。而IE下我们的工具相对较为贫乏，但是我们可以使用IETester来测试不同IE版本的显示效果，IETester的开发者也提供了DebugBar这款IE插件免费供个人使用，但商业用户只可试用60天。
2.对IE6单独兼容
兼容IE6的第一步就是单独对IE进行兼容，你针对IE6所写的代码只影响IE6；有几种方法可以区分开IE6：IE特有条件注释、CSS选择器、JavaScript，网上这方面的资源非常丰富。具体的方法这里不再赘述。
3.IE6里的图片问题
3.1 PNG半透明图片
有很多JavaScript解决方案来修复IE6使用PNG-24图片，可以从互联网上获得相关信息。另外一个办法是使用IE特有的滤镜
3.2 IE6下的CSS圆角。
具体实现方法，可以参看http://www.virtuosimedia.com/tutorials/css-rounded-corner-menus 不使用JS的方法，解决IE下圆角问题。
3.3 IE6下背景闪烁问题。
如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存，每次触发hover的时候都会重新加载，可以用JavaScript设置IE6缓存这些图片：
document.execCommand("BackgroundImageCache",false,true);
当然，这里创意灵犀也给出一种自己的解决方法，就是使用背景的split。将两个要切换的背景放在一张图片中，通过css的backgroun-position来实现同时加载。具体效果可以参看本站首页http://elingxi.com中的24小时客服按钮。
4.IE6里的列表问题
4.1 横向列表宽度bug
如果你使用float:left;[/i]把[i]<li>[/i]横向摆列，并且[i]<li>[/i]内包含的[i]<a>[/i](或其他)触发了hasLayout，在IE6下就会有错误的表现.
解决方法很简单，只需要给[i]<a>[/i]定义同样的[i]float:left;即可。
4.2 列表阶梯bug
列表阶梯bug通常会在给<li>[/i]的子元素[i]<a>[/i]使用[i]float:left;时触发，我们本意是要做一个横向的列表(通常是导航栏)，但IE却可能呈现出垂直的或者阶梯状。
解决办法就是给<li>[/i]定义[i]float:left;[/i]而非子元素[i]<a>[/i]，或者给[i]<li>[/i]定义[i]display:inline;也可以解决。
4.3 垂直列表间隙bug
当我们使用<li>包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素(<li>)之间添加空隙；解决这个问题的方法有很多.把<a>flaot并且清除float来解决这个问题。
5.IE6的千年老大难——IE6的布局问题
5.1 理解 hasLayout
许多IE6下的Bug及渲染问题都可以归于微软的私有概念hasLayout[/i]。简要的说，在给元素定义具体的尺寸（如 [i]height[/i]或[i]width[/i]）就会触发[i]hasLayout，在IE6下缺失或触发hasLayout会导致一些bug。
5.2 IE6 盒模型
如果怪异模式（quirks mode）在IE6中启用，IE6将会使用微软旧版的盒模型：width是元素的实际宽度，内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)。最好的办法是申明正确的文档类型以避免触发怪异模式，或者避免给有border[/i]或 [i]padding[/i]的元素定义[i]width属性。当然你也可以考虑使用条件注释。
5.3 最小高度
IE6 不支持min-height[/i]属性，但它却认为[i]height[/i]就是最小高度。解决的方法也很多，我们一般使用ie6不支持但其余浏览器 支持的属性[i]!important。当然，我们还可以使用CSS 选择器。需要注意的是，下面代码中各个属性的顺序不能写错。
/* 所有浏览器 */ #container {min-height:200px; height:auto !important; height:200px;}
5.4 最大高度
非常遗憾，在IE6下实现max-height只能使用IE特有滤镜，或者可以使用JavaScript实现。我个人更建议使用JavaScript来解决，因为IE滤镜会消耗大量资源甚至会使浏览器崩溃，而且禁用JavaScript后这两种方法都无法生效。
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);
5.5 100% 高度
在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html[/i]和[i]body[/i]定义[i]height:100%;。
5.6 最小宽度
同max-height[/i]和[i]max-width[/i]一样，IE6也不支持[i]min-width。有2个方法实现最小宽度，使用额外的标签、使用JavaScript。
5.7 IE双双倍边距的BUG
IE的双倍边距问题是我们最常见到的。在布局中当左右两个块级元素均为float时，两个元素之间的外边距(margin值)会被IE错误的计算为双倍距离。解决方法很简单，就是给元素添加display:inline，取消元素的块级属性。
5.8清除浮动
如果你想用div(或其他容器)包裹一个浮动的元素，你会发现必须给div(容器)定义明确的height[/i]、[i]width[/i]、[i]overflow之中一个属性（除了auto值）才能将浮动元素严实地包裹。
5.9浮动层错位
当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7及其他标准浏览器里，超出的内容仅仅只是超出边缘；但在IE6中容 器会忽视定义的width值，宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素，那么就会导致错位问题。
浮动层错位问题在IE6下没有真正让人满意的解决方法，虽然可以使用overflow:hidden;[/i]或 [i]overflow:scroll;[/i]来修正，但[i]hidden[/i]容易导致其他一些问题，[i]scroll会破坏设 计；JavaScript也没法很好地解决这个问题。所以我的建议是一定要避免这个问题发生，使用一个固定的布局或者控制好内容的宽度。
5.10 躲猫猫bug
在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的 链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。解决的方法很简单在(那个未浮动的)内容之后添加一个<span style="clear:both;"></span>
5.11 3像素间距bug
在IE6中，当文本(或无浮动元素)跟在一个浮动的元素之后，文本和这个浮动元素之间会多出3像素的间隔。解决的方法就是给浮动层添加 display:inline 和 -3px 负值margin。
5.12 IE下z-index的bug
在IE浏览器中，定位元素的z-index[/i]层级是相对于各自的父级容器，所以会导致[i]z-index[/i]出现错误的表现。解决方法是给其父级元素定义[i]z-index[/i]，有些情况下还需要定义[i]position:relative。
5.13 Overflow Bug
在IE6/7中，overflow[/i]无法正确的隐藏有相对定位[i]position:relative;[/i]的子元素。解决方法就是给外包容器[i].wrap[/i]加上[i]position:relative;。
结束语：IE6虽然让人深恶痛绝，但是当你真正掌握了前端设计的精髓，在设计之初就构思好的布局，避免使用兼容问题的代码，尽量少用甚至不用CSS hack，达到用户良好的体验才是我们追求的根本。