- ie下层的最小高度为十七八px所以十七八px以下的高度ie6会自动按照十七八计算，可以通过设置overflow ：hidden来解决；
- 层的居中显示： margin-left:auto; margin-right:auto;因为层的宽度默认是100%所以想要有居中的效果必须得有合适的宽度；
- !important,css在同一个大括号内是让firefox优先认领,就是说只有在同一括号内定下两个样式的时候ie不得不忽略掉它；
- 当元素浮动时，IE6会错误的把浮动方向的margin值双倍计算。Steve Clason给出了解决方法：给元素添加
display:inline; 设置文字上下居中显示：方法一就是设置lineheight与他的height一致来实现，或者设置上下内边距来实现；- ul常用设置：margin:0;padding:0;list-style:none;
- DIV高度自适应-----CSS布局中最小高度（min-height）的妙用(兼容IE,FF) {height:auto !important;height:600px; min-height:600px;}
- FF和ie中width定义的不同，ie中的宽度是指内容加边框的总宽度，而FF中的width则是说内容的宽度，一般这种情况是通说设置两个相同属性然后指定！important来实现兼容的；
- 背景闪烁问题如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存，每次触发hover的时候都会重新加载，可以用JavaScript设置IE6缓存这些图片：document.execCommand("BackgroundImageCache",false,true);
- 设置图片的背景注意事项： 当把background-attachment设置为fixed时，背景在火狐上不显示，设置为scroll时则在火狐和ie都可以正常显示；
- iframe的滚动条问题：在ie6上，当设置scroll=auto时，当高度过高，宽度即使不超宽，横向滚动条也会和纵向滚动条一同出现，而这个滚动条又是我们不想看到的，
解决办法：设置iframe的scroll=no,给iframe设置固定的宽和高，给iframe内部的页面内容用一个div括起来，也给上固定的宽和高，同时加上overflow-y:auto,这样就实现了在ie6下隐藏横向滚动条的目的，在这里感谢淡定哥 - 设置超链接的宽度和高度问题：
-
a 标签默认的 display 属性是 inline，width、height 是无效的。 对 a 设置 display:block，虽然可以解决宽度高度的问题，但元素会自动断行，无法达到我们需要的效果。有没有什么方式可以实现类似 img 标签那样，既可以设定高度宽度，又不会自动断行呢？ 答案是肯定的。在 Opera 和 Webkit 中支持一个 CSS2 的属性 display: inline-block。利用这个属性，在 Opera 下即可完全实现我们所需的效果，但在其它浏览器下就不行了。 display 属性另外还有一个不太常用的值 display: inline-table。 display: inline-block //Opera 和 Webkit 支持 standard browsers display: inline-table //除了 IE 以外的所有浏览器正确支持 display: inline //IE Only display: -moz-inline-stack; //Firefox only 所以： .element-class { display: -moz-inline-stack; //Firefox only code display: inline-block; //some standard browsers zoom: 1; //IE only *display: inline; //Only IE know this code (CSS Hack) } 通过这样的代码就可以实现在各种浏览器中表现一致的 inline-block 了。这种方式有个小缺憾，就是无法通过 W3C CSS 验证。当然，要想通过验证也很简单，可以对除了 IE 之外的浏览器发出 inline-table 属性的样式表，对于 IE 单独发出一份 IE Only 的 CSS
下面文章来自IE6终极备忘
〖策略〗
在讨论IE6的BUG及如何修复之前，有必要先讲一些策略去避免这些恼人的问题——正所谓防患于未然 。
- IE6 市场占有率
- 做一个简洁的设计
- 使用合适的文档申明(doctype)
- 验证你的代码
- 先对标准浏览器进行兼容
- 渐进增强(Progressive Enhancement)
- 使用自己的预设样式（CSS Reset）
- 使用JavaScript框架
- 使用JavaScript模拟标准浏览器
- 如何在IE下调试页面
〖对IE6单独兼容〗
兼容IE6的第一步就是单独对IE进行兼容，你针对IE6所写的代码只影响IE6。
〖图片〗
〖布局〗
解决IE6布局方面的BUG非常的恼人！特别是在实现一个精美的设计稿时。
- 理解 hasLayout
- IE6 盒模型
- 最小高度
- 最大高度
- 100% 高度
- 最小宽度
- 最大宽度
- 双边距Bug
- 清除浮动
- 浮动层错位
- 躲猫猫bug（The Guillotine Bug）
- 绝对定位元素的1像素间距bug
- 3像素间距bug
- IE下z-index的bug
- Overflow Bug
〖列表〗
〖行为〗
ie6有着一些行为方面的BUG，究其原因是IE6版本太老了，不能完好地支持CSS2更不支持CSS3，而且微软固执的使用了其私有方法。
〖JavaScript〗
IE6有着数不尽的JavaScript bug，这里我不会讲解每一个IE6下JavaScript的bug，只摘取其中几个普遍的问题来讨论。
〖其他〗
〖相关资源〗
〖策略〗
在讨论IE6的BUG及如何修复之前，有必要讲叙一些策略去避免这些恼人的问题——正所谓防患于未然 。
IE6 市场占有率
据Market Share统计，目前（2009年8月）IE6 的市场占有率为25.25%，但是其他地方的统计明显要低，为18.1%；尽管统计结果不同，但都呈现出了下降的趋势（翻译此文时，淘宝的IE6用户已从70%跌破至69%）。但是最重要的，还是你自己网站的统计数据。如果你对你的网站进行了流量分析，那么IE6的占有率是否值得你去针对IE6进行开发？这需要你自己去权衡。
如果你网站绝大部分访问者不使用IE6并且不付费给你，那么你不必特意区针对IE6做兼容，从而节省时间、精力及资金。
做一个简洁的设计
在做设计的同时考虑代码的实现，可以避免一些布局上的问题。再复杂的设计稿也能用简洁的代码实现，如果你使用了过于繁冗的标签，那么你需要重新修缮设计稿。
如果你有丰富的开发经历，攻克过很多种布局难题，记录下你的解决方案，在以后碰到相同问题时可以提高开发效率。
使用合适的文档申明(doctype)
使用一个错误的文档声明会触发quirks mode(怪异模式)，正确的文档声明可以保证你的页面在所有浏览器下保持一致的效果。使用其中的一个文档申明：HTML 5, HTML 4.01 Strict, HTML 4.01 Frameset, HTML 4.01 Transitional, XHTML 1.0 Strict,XHTML 1.0 Frameset, XHTML 1.0 Transitional, or XHTML 1.1
HTML 5
<!DOCTYPE HTML>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
验证你的代码
我曾听说过有些人认为校验代码没有任何实用价值，但我不这么认为。校验仅仅只需花费一点点时间，而且将受益于所有浏览器而非仅仅IE6；验证确保了向后兼容并且易于维护。至少也得验证XHTML！唯一可以忽略验证的情况是在你打算使用CSS3时。
先对标准浏览器进行兼容
在写代码的过程中，一开始在标准浏览器中测试（如 Firefox, Opera, Chrome等），然后再去测试非标准浏览器（如IE6/IE7），因为这些标准浏览器都遵循w3c标准，大多的处理方式都相同。你可以分开来单独去兼容“特别”的IE浏览器，这样做能规范你的代码，你将会因此拥有扎实的基础；而且如果你不再需要兼容这些非标准浏览器，你可以一次性删除这些修复兼容性代码。
渐进增强(Progressive Enhancement)
渐进增强(Progressive Enhancement)是为了确保没有页面特效后基本功能也是可用的。简单来讲，渐进增强是指在确保页面在禁用JavaScript后能正常运作后，再对页面添加各种特效（JavaScript动画、Ajax异步等等）。我们同样可以运用“渐进增强”原则来使用CSS3（或者一些CSS2）、HTML5以及其他IE6所不支持的web规范。
某些情况下，是无法让所有用户在任何浏览器下都完全一模一样，特别是那些使用IE6的用户。运用渐进增强策略，可以保证让那些用户至少使用到你网站（或网络应用）的基本功能。
更多渐进增强的资料：
- 理解渐进增强（译文）
- Understanding Progressive Enhancement
- Progressive Enhancement With CSS
- Progressive Enhancement: What It Is, And How To Use It?
- Graceful Degradation vs. Progressive Enhancement
- Pragmatic Progressive Enhancement – Why You Should Bother With It
使用自己的预设样式（CSS Reset）
每个浏览器都有各自不同的预设样式，在你的样式表之前使用预设样式（CSS Reset）可以避免在之后编写冗长的浏览器兼容样式。在网上有很多CSS Reset可供参考。
简单CSS Reset示例：
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
一些可供参考的CSS Resets：
使用JavaScript框架
如果你的网站使用了较多的JavaScript特效，建议使用JavaScript框架。大部分的js框架都兼容了包括IE6在内的各种浏览器。可选的框架有很多，但一般能用一种框架实现的效果一定可以用另外一种框架实现，所以你可以根据个人喜好来选择合适的框架。
以下是一些常用的JavaScript框架：
强烈推荐实用MooTools，但如果你是入门者，还是建议使用jQuery。
使用JavaScript模拟标准浏览器
现在有一些JavaScript来使IE模拟标准浏览器，如果你有较高比例的用户使用IE6并且开启了JavaScript，可以考虑使用Dean Edwards的IE7或者类似的脚本。
译者注：不建议使用这些脚本，因为这些“模拟”的实现往往会消耗大量的资源，IE本来就够烂了。
如何在IE下调试页面
在IE下调试页面很麻烦，Firefox下的扩展程序Firebug和Web Developer Toolbar都是很好用的工具，如果你想在IE或其他浏览器上使用firebug，可以用Firebug Lite。
在IE下有两种最好的调试方法：IE Collection和IETester，并且都是免费的（虽然有一点点缺陷）。IETester的开发者也提供了DebugBar这款IE插件免费供个人使用，但商业用户只可试用60天。
〖对IE6单独兼容〗
兼容IE6的第一步就是单独对IE进行兼容，你针对IE6所写的代码只影响IE6；有几种方法可以区分开IE6：IE特有条件注释、CSS选择器、JavaScript，我们将逐一讨论。
使用IE特有条件注释
微软给IE添加了条件注释以区分不同版本，任何东西都可以塞进条件注释里：标签、JavaScript、js文件、css、内联样式。可以使用条件注释来针对某一个IE浏览器版本来编写代码。
规则如下：（译注：可参考IE 特有注释(hack)）
<p>这段文字会在所有浏览器显示</p> <!--[if lte IE 6]> <p>这段文字仅显示在 IE6及IE6以下版本。</p> <p>This message will only appear in versions of Internet Explorer less than or equal to version 6.</p> <![endif]--> <!--[if gte IE 6]> <p>这段文字仅显示在 IE6及IE6以上版本。</p> <p>This message will only appear in versions of Internet Explorer greater than or equal to version 6.</p> <![endif]--> <!--[if gt IE 6]> <p>这段文字仅显示在 IE6以上版本（不包含IE6）。</p> <p>This message will only appear in versions of Internet Explorer greater than version 6.</p> <![endif]--> <!--[if IE 5.5]> <p>这段文字仅显示在 IE5.5。</p> <p>This message will only appear in Internet Explorer 5.5.</p> <![endif]--> <!--在 IE6及IE6以下版本中加载css--> <!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" /> <![endif]--> <p>这段文字会在所有浏览器显示</p>
使用条件注释加载css的好处是这些样式是独立于其他css文件的，因此不会在编写兼容代码时弄得一团糟；而且当IE6的市场份额降低到不需要兼容时，可以快速的清理掉。
使用条件注释的唯一缺点是在IE浏览器下会增加额外的HTTP请求数，所以需要权衡是否这样做。但我不建议使用条件注释加载外部js文件，因为js文件会造成阻滞，在js未加载完之前其余文件都不会被加载；对于js请使用JavaScript程序来区分浏览器而非条件注释。
使用CSS选择器区分开IE6
如果你不打算使用条件注释，CSS选择器是另外一个区分开IE6的办法，IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。
示例：
<style type="text/css" > /* IE6 专用 */ .content {color:red;} /* 其他浏览器 */ div>p .content {color:blue;} </style> <div> <p class="header">Some Header Text Here</p> </div>
这个方法的缺点是容易把样式表弄得一团糟，所以一定要写好注释说明。
在示例中，针对IE6写的样式在其他浏览器中也会执行，但(标准浏览器中)之后的子选择器覆盖了之前的申明，而IE6不支持子选择器所以忽略了它。
扩展阅读：
使用JavaScript区分开IE6
如果你想要使用JavaScript区分开IE6，请看示例：
//原生JavaScript if(typeof document.body.style.maxHeight === "undefined") { alert('IE6 Detected'); } //MooTools（框架） if (Browser.Engine.trident4) { alert('IE6 Detected'); } //jQuery（框架） if (($.browser.msie) && ($.browser.version == "6.0")){ alert('IE6 Detected'); }
扩展阅读：
〖图片〗
PNG半透明图片
有很多JavaScript解决方案来修复IE6使用PNG-24图片，但除了Twin Helix’s IE5.5+ PNG Alpha Fix都不支持CSS sprites。
另外一个办法是使用IE特有的滤镜，可阅读Aaron Baxter的博客。或译者的《ie5+ PNG Fix》
JavaScript方式修复IE6 PNG
IE6下的圆角
可以详细阅读CSS 圆角菜单。
背景闪烁问题
如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存，每次触发hover的时候都会重新加载，可以用JavaScript设置IE6缓存这些图片：
document.execCommand("BackgroundImageCache",false,true);
其他解决方法：
〖布局〗
解决IE6布局方面的BUG非常的恼人！特别是在实现一个精美的设计稿时。
理解 hasLayout
许多IE6下的Bug及渲染问题都可以归于微软的私有概念hasLayout。简要的说，在给元素定义具体的尺寸（如height或width）就会触发hasLayout，在IE6下缺失或触发hasLayout会导致一些bug。
扩展阅读：
- 《On having layout》(译文)
- “HasLayout” Overview from Microsoft
- hasLayout CSS Bugs
IE6 盒模型
如果怪异模式（quirks mode）在IE6中启用，IE6将会使用微软旧版的盒模型：width是元素的实际宽度，内容宽度 = width – (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)。最好的办法是申明正确的文档类型以避免触发怪异模式，或者避免给有border或padding的元素定义width属性。当然你也可以考虑使用条件注释。
扩展阅读：
- IE CSS Tricks That Will Get You Every Time
- Internet Explorer And The CSS Box Model
- Internet Explorer Box Model Bug
最小高度
IE6 不支持min-height属性，但它却认为height就是最小高度。感谢Dustin Diaz提供了一个很好的方法：使用!important，ie6会忽视它但其余浏览器不会。
注：IE6在同一个声明语句中(即一个综括号{})的属性定义，后面的总是会覆盖前面的，所以下例中后面的height覆盖掉了前面定义的important height
/* 所有浏览器 */ #container {min-height:200px; height:auto !important; height:200px;}
另一个方法是使用CSS 选择器：
/* 仅IE6 */ #container {min-height:200px; height:200px;} /* 其他浏览器 */ html>body #container { height:auto;}
最大高度
非常遗憾，在IE6下实现max-height只能使用IE特有滤镜，或者可以使用JavaScript实现。我个人更建议使用JavaScript来解决，因为IE滤镜会消耗大量资源甚至会使浏览器崩溃，而且禁用JavaScript后这两种方法都无法生效。
JavaScript
//直接使用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);
100% 高度
在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;。
/* 给child元素定义100%高度（IE6）*/ #parent {height:500px;} #child {height:100%;} /* 定义满屏高度（IE6）*/ html, body {height:100%;} #fullLength {height:100%;}
最小宽度
同max-height和max-width一样，IE6也不支持min-width。有2个方法实现最小宽度，使用额外的标签、使用JavaScript。
//直接使用ID来改变元素的最小宽度 var container = document.getElementById('container'); container.style.width = (container.clientWidth < width) ? "500px" : "auto"; //写成函数来运行 function setMinWidth(elementId, width){ var container = document.getElementById(elementId); container.style.width = (container.clientWidth < width) ? width + "px" : "auto"; } //函数示例 setMinWidth('container1', 200); setMinWidth('container2', 500);
最大宽度
只能使用JavaScript。
//直接使用ID来改变元素的最大宽度 var container = document.getElementById(elementId); container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto"; //写成函数来运行 function setMaxWidth(elementId, width){ var container = document.getElementById(elementId); container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto"; } //函数示例 setMaxWidth('container1', 200); setMaxWidth('container2', 500);
双边距Bug
当元素浮动时，IE6会错误的把浮动方向的margin值双倍计算。Steve Clason给出了解决方法：给元素添加display:inline;
/*IE6下将产生双倍边距*/ .floatedEl {float:left; margin-left:100px;} /*修正*/ .floatedEl {float:left; margin-left:100px; display:inline;}
清除浮动
如果你想用div(或其他容器)包裹一个浮动的元素，你会发现必须给div(容器)定义明确的height、width、overflow之中一个属性（除了auto值）才能将浮动元素严实地包裹。
示例：
<div id="container"> <div id="floated1"></div> <div id="floated2"></div> </div>
#container {border:1px solid #333; overflow:auto; height:100%;} #floated1 {float:left; height:300px; width:200px; background:#00F;} #floated2 {float:right; height:400px; width:200px; background:#F0F;}
译者常用的方式：
#container {zoom:1;} /* ie浏览器 */ #container:after{content:"\0020";display:block;height:0;clear:both;} /*标准浏览器*/
扩展阅读：
浮动层错位
当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7及其他标准浏览器里，超出的内容仅仅只是超出边缘；但在IE6中容器会忽视定义的width值，宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素，那么就会导致错位问题。
浮动层错位问题在IE6下没有真正让人满意的解决方法，虽然可以使用overflow:hidden;或overflow:scroll;来修正，但hidden容易导致其他一些问题，scroll会破坏设计；JavaScript也没法很好地解决这个问题。所以我的建议是一定要避免这个问题发生，使用一个固定的布局或者控制好内容的宽度。
扩展阅读
- Float Drop – floated elements drop below their expected position
- Internet Explorer 6 and the Expanding Box Problem
躲猫猫bug
在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。
头大了吧！但别担心，well-documented提供了详细的解决方法。
不管为何会触发这个问题，解决方法很简单：
- 在(那个未浮动的)内容之后添加一个
<span style="clear:both;"></span> - 触发包含了这些链接的容器的
hasLayout，一个简单的方法就是给其定义height:1%;
扩展阅读：
绝对定位元素的1像素间距bug
IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。Paul O’Brien有关这个bug有一篇文章来讲解。
扩展阅读：
3像素间距bug
在IE6中，当文本(或无浮动元素)跟在一个浮动的元素之后，文本和这个浮动元素之间会多出3像素的间隔，Stu Nichols有一个非常好的解决方法。
译注：可运行下面代码来查看作者提供的修复方法
<style type="text/css"> .container {750px; height:237px; margin:50px auto; background:url(http://www.cssplay.co.uk/ie/3pxbug/bug.jpg) no-repeat center top;} .container #page1,.container #page2 {30%; margin:0 auto 0 auto; padding-top:80px;} .container .topMid {overflow:hidden; height:15px; background: url(http://www.cssplay.co.uk/ie/3pxbug/topmid.png);} .container .topLeft {overflow:hidden; 20px; height:15px; float:left; background:url(http://www.cssplay.co.uk/ie/3pxbug/topleft.png);} .container .topRight {overflow:hidden; 25px; height:15px; float:right; background:url(http://www.cssplay.co.uk/ie/3pxbug/topright.png);} .container .content {height:100px; margin-right:25px; background:#ccc;} .container .content h2 {font-size:20px; height:80px; line-height:70px; text-align:center; margin:0;} .container .midLeft {20px; height:100px; float:left; background: url(http://www.cssplay.co.uk/ie/3pxbug/midleft.png);} .container .midRight {25px; height:100px; float:right; background: url(http://www.cssplay.co.uk/ie/3pxbug/midright.png);} .container .bottomMid {overflow:hidden; height:20px; background: url(http://www.cssplay.co.uk/ie/3pxbug/bottommid.png);} .container .bottomLeft {overflow:hidden; 20px; height:20px; float:left; background:url(http://www.cssplay.co.uk/ie/3pxbug/bottomleft.png);} .container .bottomRight {overflow:hidden; 25px; height:20px; float:right; background:url(http://www.cssplay.co.uk/ie/3pxbug/bottomright.png);} /* 给浮动层添加 display:inline 和 -3px 负值margin */ .container #page2 .topLeft, .container #page2 .midLeft, .container #page2 .bottomLeft {display:inline;margin-right:-3px;} .container #page2 .topRight, .container #page2 .midRight, .container #page2 .bottomRight {display:inline;margin-left:-3px;} /* 给中间的内容层定义 margin-right 以纠正-3px */ * html #page2 .content {margin-right:22px;} </style> <div class="container"> <div id="page1"> <div class="topLeft"></div> <div class="topRight"></div> <div class="topMid"></div> <div class="midLeft"></div> <div class="midRight"></div> <div class="content"> <h2>〖3px Bug〗</h2> </div> <div class="bottomLeft"></div> <div class="bottomRight"></div> <div class="bottomMid"></div> </div> </div> <div class="container"> <div id="page2"> <div class="topLeft"></div> <div class="topRight"></div> <div class="topMid"></div> <div class="midLeft"></div> <div class="midRight"></div> <div class="content"> <h2>〖3px Bug 已修正！〗</h2> </div> <div class="bottomLeft"></div> <div class="bottomRight"></div> <div class="bottomMid"></div> </div> </div>
IE下z-index的bug
在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative
扩展阅读：
Overflow Bug
在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素，如下例：
<style type="text/css" > .wrap {overflow:hidden;100px;height:100px;background:#336600;border:solid #666600 5px;} .child {position:relative;50px;height:200px;background:#99CC00;} </style> <div class="wrap"> <div class="child"> </div> </div>
解决方法就是给外包容器.wrap加上position:relative;。
〖列表问题〗
最为特别的IE许多bug都会影响到列表，这里例举了一些示例。
横向列表宽度bug
如果你使用float:left;把<li>横向摆列，并且<li>内包含的<a>(或其他)触发了hasLayout，在IE6下就会有错误的表现：
<style type="text/css" > #menu li { float:left; list-style:none; background:#CCCCFF; } #menu li a { padding:0 10px; display:block; height:20px; /* 触发了hasLayout */ } </style> <ul id="menu"> <li><a href="#" title="">Menu Item #1</a></li> <li><a href="#" title="">Menu Item #2</a></li> <li><a href="#" title="">Menu Item #3</a></li> </ul>
解决方法很简单，只需要给<a>定义同样的float:left;即可。
列表阶梯bug
bug示例：
<style type="text/css" > ul { clear: both; list-style: none; } a { display: block; float: left; background: #99CCFF; } #two a { font-size: 1.1em; } </style> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> <ul id="two"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul>
列表阶梯bug通常会在给<li>的子元素<a>使用float:left;时触发，我们本意是要做一个横向的列表(通常是导航栏)，但IE却可能呈现出垂直的或者阶梯状。
解决办法就是给<li>定义float:left;而非子元素<a>，或者给<li>定义display:inline;也可以解决。
垂直列表间隙bug
当我们使用<li>包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素(<li>)之间添加空隙；解决这个问题的方法有很多，看示例：
BUG代码：
<style type="text/css" > ul {margin:0; padding:0; list-style:none;} li a {display:block; background:#ddd;} </style> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul>
解决方法：
Jon Hicks把<a>flaot并且清除float来解决这个问题：
ul {margin:0; padding:0; list-style:none;} li a {display:block; padding:0.5em; background:#ddd; float:left; clear:left;}
另外一个办法就是触发<a>的hasLayout（如定义高宽、使用zoom:1;）
ul {margin:0; padding:0; list-style:none;} li a {display:block; padding:0.5em; background:#ddd; zoom:1;} /* height:1%; 也有同样的作用 */
也可以给<li>定义display:inline;来解决此问题。
另外还有一个极有趣的方法，给<a>包含的文本末尾添加一个空格：
<ul> <li><a href="#">Item 1 </a></li> <li><a href="#">Item 2 </a></li> <li><a href="#">Item 3 </a></li> </ul>
扩展阅读：
〖行为〗
ie6有着一些行为方面的BUG，究其原因是IE6版本太老了，不能完好地支持CSS2更不支持CSS3，而且微软固执的使用了其私有方法。
IE6中的:hover
在IE6中，除了<a>(需要有href属性)才能触发:hover行为，这妨碍了我们实现许多鼠标触碰效果，但还是有一些法子是可以解决它的。
最好是不要用:hover来实现重要的功能，仅仅只用它来强化效果。
许多修复IE6 hover的方法都是使用微软提供的私有方法behavior或者JavaScript，通常使用JavaScript框架或者IE6修复类js。
在IE浏览其中使用Canvas标签
canvas是HTML5新引入的元素，提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。
所有IE浏览器都不支持HTML5中的canvas标签，而是使用它微软私有的VML，但是可以通过JavaScript来使canvas在IE下生效。
修复canvas的一些JavaScript：
- ExplorerCanvas (also called excanvas)
- ExplorerCanvas Google Group
- MooCanvas at Github, a MooTools implementation of excanvas
IE6调整窗口大小的 Bug
当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。Emil Stenström发现了IE6 Resize Bug并提供了解决办法：给body定义position:relative;就行了，够简单吧！~
〖JavaScript〗
IE6有着数不尽的JavaScript bug，这里我不会讲解每一个IE6下JavaScript的bug，只摘取其中几个普遍的问题来讨论。
Error: Expected Identifier, String, Or Number
IE浏览器不容许不良的JavaScript书写，如果在数组或者Hash对象的末尾有逗号就会引发异常“Expected Identifier, String, Or Number”，其他浏览器允许这样做，但在书写时注意删除末尾的逗号以避免这个错误。
IE中JavaScript内存泄露
由于IE浏览器使用其自己的内存管理，当JavaScript使用的内存没有被回收时就会引发内存泄露。可阅读《JScript的内存泄漏》及《Finally, the alternative fix for IE6’s memory leak is available》
〖其他〗
IE6中一些其他bug
文本重复Bug
在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug：
<style type="text/css" > .demobox { 250px; border: 3px solid #4c6f42; } .firstfloat { float: left; background: #939a90; } .secondfloat { float: left; 250px; margin-bottom: 2px; background: #fbdabb; } </style> <!-- Begin live demo --> <div class="demobox"> <div class="firstfloat">第一个浮动层</div> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <div class="secondfloat"> 第二个浮动层<br /> <span style="background: #f2ab82;">aa这段文字会被重复。。。这段文字会被重复。。。这段文字会被重复。。。这段文字会被重复。。。这段文字会被重复。。。</span> </div> <div style="clear: both; background: #b2d4af;">清除浮动层</div> </div> <!-- end live demo -->
Position Is Everything详细讲解了这个问题，但解决办法很简单：给浮动元素添加display:inline;。
.firstfloat {display:inline;}
IE的收藏夹图标(Favicons)
收藏夹图标会以16×16像素大小显示在你的收藏夹里，有两种方法来显示收藏夹图标：
- 把一张图片命名为
favicon.ico并放置在网站的根目录，IE及其他浏览区都会自动设置该文件为收藏夹图标； - 在
<head>区域声明：<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
需要注意的是收藏夹图标会被一直缓存，除非你清除浏览器的缓存，才会更新新的图标；如果你想要浏览者自动更新收藏夹图标，请给favicon.ico设置expires。
扩展阅读：
IE6的GZip
服务器端使用GZip压缩了的文件，在某些版本的IE6（特别是未更新XP sp2的）中会有一些问题。所幸的是Seb Duggan找到了IE6 GZip bug解决方法，在Apache中使用ISAPI_Rewrite。
Seb提供的方法是在 ISAPI_Rewrite 安装目录下的httpd.conf中加入以下代码：
RewriteEngine on
RewriteCond %{HTTP:User-Agent} MSIE [56]
RewriteCond %{HTTP:User-Agent} !SV1
RewriteCond %{REQUEST_URI} .(css|js)$
RewriteHeader Accept-Encoding: .* $1