[一]10个技巧帮你搞定IE 6
虽然说IE8已经来了，并且表现不错。8个小时突破1200W下载，远远地超过24小时下载800W的firefox。但对于整个互联网，IE6仍然是用户最多的浏览器。暂不说IE6怎样，把Web的表现做得更好，既是一种责任，也是一种能力的表现。如果你依然对IE6所出现的种种问题无可奈何，就让我带你来看一下来自SitePoint的 10 Fixes That Solve IE6 Problems，学会这10个方法，你将可以解决大部分IE6出现的问题。
1. 使用 DOCTYPE
你需要在HTML页面的最顶部加上DOCTYPE类型，当然， strict版是值得推荐的，例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
或者, XHTML页面的!DOCTYPE：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
你最不想看到的是，IE6进入怪癖模式 – 其实已经够多怪癖了。
2. 设置position: relative
设置position:relative解决了不止一个问题，特别当需要设置对齐的时候。很明显，你需要明白的一点是，绝对定位是相对来说的。说不定，因为你没有设置，而不知道东西都飞到那去了。比如，你设计了每篇文章前都有一张图片，最后，你发现，只有一张图片在页面上，或许，是他们重叠了。
3. 给浮动元素设置 display:inline 值
这源于著名的IE6双倍外边距BUG，例如，你给一个DIV设计了浮动，并且，设置了margin-left:5px;，在IE6中很可能就是margin-left:10px了，这里，给浮动元素设置 display:inline；，即可解决问题。
4. 为元素设置 hasLayout
很多IE6（或IE7）的问题可以用设置hasLayout值的方法来解决。（如果你不知道hasLayout是什么，请看这里）
最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然，zoom也可以用，但这不是CSS的一部分)。设置一个具体的值是推荐的，但有时候并不一定知道高度多少，这里，你可能会用到height:1%。如果父元素没有设置高度，那么元素的物理高度并不会改变，但是，已经具备hasLayout属性。
5. 解决字符重复出现的问题
复杂的布局可能导致一些浮动元素里面的文字，出现在清理浮动位置的下面。这是一个奇怪的问题，下面这此可以帮你解决：
- 确保浮动元素设置了
display:inline; - 在浮动元素中使用
margin-right:-3px; - 在浮动元素的最后一个元素后加上一个IE注释，例如：
<!--[if !IE]>把你的注释放这里…<![endif]--> - 在最后的元素中加上一个DIV(这以设置width 为90% 或者其他相似的高度)
UPDATE: 最简单的方法是删除掉所有注释。（感谢恬玮儿的提示，我自己并没有遇到过，不过，google了一下，发现这个方法也可以解决，并且，这是值得推荐的一个方法。）
你可以到positioniseverything.net中查看更多关于这个的解释。
6.只在<a>标签中使用hover，IE6只支持<a>标签显示hover样式
当然，你还是可以通过JS来解决这个方法。但是， 这关于到可访问性的问题。建议不要把重要的内容设置在利用JS来实现的hover中。
7. 使用!important 或高级选择器来区分IE浏览器
比如min-height可以避免使用CSS来实现对IE的兼容。
#element {
min-height: 20em;
height: auto !important;
height: 20em; /* 让IE6显示这个高度 */
}
IE6 并不能正确地识别min-height，可以设置固定的高度，让IE6解析为20em。即使如此，它还是会因为内容的尺寸扩大而改变高度。而另一个方法是使用高级选择器：
#element {
min-height: 20em;
height: 20em;
}
/* 忽略 IE6 */
#element[id] {
height: auto;
}
8. 避免按比例确定的尺寸
比例会让IE6变得错乱，除非你给父元素添加一个确切的高度。不然，给其他的加上!important，例如：
body{
margin: 2% 0 !important;
margin: 20px 0; /* IE6 可读 */
}
9. 尽早测试，经常测试
别忘记尽早测试，经常测试， 除非你的程度已经完成。不然，你可能花更多的时间来解决IE6的问题。一般情况下，如果你的网站能在IE6和firefox下良好表现，估计其他浏览器就不会有什么大问题了。(至少我自己深有体会)
10. 重构你的代码
很多情况下，解决一个问题，可能比重构你的代码要花更多的时间。比如上一次给公司写一个频道页面的，没有一边制作，一边测试IE6的表现，导致最近有很多奇怪的问题，因为布局比较复杂。后来，干脆重构代码。用了2天。我想，如果是想解决方法，或许2天都搞不定。
[二]打败 IE 的葵花宝典：CSS Bug Table
作为一名前端，我们通常要做的就是让页面在各系统A-Grade浏览器，甚至网站浏览份额0.1%以上的浏览器上良好显示。当然，还有性能问题。不过，今天要说的是样式的兼容问题。在IE/Mozilla/Webkit/Opera四分天下的今天，IE6-9/Mozilla（Gecko）系列/Chrome/Safari/Opera etc. 这些浏览器的兼容，无不让前端们头痛。而在这之中，最让人头痛的当数IE，特别是IE6。搞定了IE6，基本也就能称霸半个江山了。搞定了IE，也相当于占领了7、80%的领地。你想做一个统治页面兼容的主么？反正我是想的。
今天，趁着想完善公司的内部样式框架，把HasLayout.net的IE CSS Bug过了一遍。整理中收获了不少东西，一些官方的不足，也根据自己的知识升级了一下。当然，也顺利地升级了框架的一些内容，感觉甚爽。随后，便将一些值得去看的Bug整理成一个列表，基于Alipay前端伟大的分享精神，分享出来以供团队工友们和大家参考。
同时，由于整理仓促，有些理解和表达不当和其他纰漏在所难免，还请大家帮忙更正。谢谢。
| 问题 | 浏览器 | DEMO | 解决方法 | |
|---|---|---|---|---|
| Hacking Rules:
property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6; |
||||
| 1 | input[button | submit] 不能用 margin:0 auto; 居中 | IE8 | bug | fixed | 为input添加width |
| 2 | body{overflow:hidden;}没有去掉滚动条 | IE6/7 | bug | fixed | 设置html{overflow:hidden;} |
| 3 | hasLayout的标签拥有高度 | IE6/7 | bug | fixed | *height:0; _overflow:hidden; |
| 4 | form>[hasLayout]元素有margin-left时，子元素中的[input | textarea] 出现2×margin-left | IE6/7 | bug | fixed | form > [hasLayout 元素]{margin-left:宽度;} form div{*margin-left:宽度÷2;} |
| 5 | 当border-width有1条<边3条时被设置成dotted时，1px的边dotted显示成dashed | IE7 | bug | fixed | 不在同一个元素上使用不同宽度的 dotted |
| 6 | 当子元素有position:relative的时候，父元素设置overflow:[hidden|auto]相当于给子元素设置了position:visible; | IE6/7 | bug | fixed | 给父元素设置position:relative; |
| 7 | :hover伪类不能改变有position:absolute的子级元素的left/top值 | IE7 | bug | fixed | 把top/left的值设置成除0%外的所有百分值；或添加一个margin-[所有方向]除0外的所有值，包括0% |
| 8 | :focus + selector {} 选择器失效 | IE8 | bug | fixed | 在失效选择器后面添加一个空选择器, :focus{} |
| 9 | 列表中混乱的浮动：在list中浮动图片时，图片出现溢出正常位置；或没有list-style | IE8 | bug | fixed | 用背景图片替换list-style |
| 10 | th 不会自动继承上级元素的 text-align | IE8 | bug | fixed | 给th添加text-align:inherit; |
| 11 | 样式(包括link/style/@import(link)) 最多允许个为是：32 | IE6-8 | ─ 常识 | 99.99%的情况下，不会遇到 |
| 12 | :hover 时若background-color为#fff, 失效 | IE7 | bug | fixed | 把background-color改成background。或者，非#fff || #ffffff |
| 13 | 忽略’>’后有注释的选择器：selector> /**/ selector{} | IE7 | bug | fixed | 官方DEMO有误 |
| 14 | * html | IE6 | ─ HACK | 只对IE6有效 |
| 15 | PNG图片中的颜色和背景颜色的值相同，但显示不同 | IE6-7 | bug | fixed | 利用 pngcrush 去除图片中的 Gamma profiles |
| 16 | margin:0 auto; 不能让block元素水平居中 | IE6-8 | bug | fixed | 给block元素添加一个width |
| 17 | 使用伪类 :first-line | :first-letter, 属性的值中出现!important 会使属性失效 | IE8 | bug | fixed | !important is evil, don’t use it anymore |
| 18 | :first-letter 失效 | IE6 | bug | fixed | 把 :first-letter 移到离{}最近的地方，如 h1, p:first-letter{}，而非 p:first-letter h1{} |
| 19 | Position:absolute元素中，a display:block, 在非:hover时只有文本可点击 | IE6/7 | bug | fixed | 给a添加background, 如果背景透明，使用background:url(‘任何页面中已经缓存的文件链接’)，不推荐background：url(#)[官方的解决方法]，因为会增加一下HTTP请求 |
| 20 | float列表元素不水平对齐：li不设置float，a设置display:block;float:[方向]，li不水平对齐 | IE6/7 | bug | fixed | 给li设置display:inline 或 float:[方向] |
| 21 | dt, dd, li 背景失效 | IE6 | bug | fixed | dt, dd, li{position:relative;} |
| 22 | <noscript />元素的样式在启用javascript的情况下显示了样式 | IE6-8 | bug | fixed | 利用js给<noscript />添加display:none; |
| 23 | 使用filter处理的透明背景图片的透明部分不可点 | IE6-8 | bug | fixed | 把background:none变成background:url(‘链接’)，链接到本身和图片之外的任何文件 |
| 24 | li内元素偏离 baseline 向下拉 | IE8 | bug | fixed | 给li设置display:inline 或 float:[方向] |
| 25 | 列表中li的list-style不显示 | IE6/7 | bug | fixed | 给li添加margin-left，留空间来显示（不要加在ul上） |
| 26 | 图片不能垂直居中 | IE6/7 | bug/fixed | 添加一个空标签，并赋给”Layout”, 比如display:inline-block; |
| 27 | 不能自定义指针样式 | IE6-8 | bug | fixed | 给指针文件设置绝对路径 |
| 28 | 背景溢出，拖动滚动条后显示正常 | IE6 | bug | fixed | 给父元素添加overflow:hidden防止溢出，并赋予hasLayout,如果添加_zoom:1; |
| 29 | 高度超过height定义的高 | IE6 | bug/fixed | 添加_overflow:hidden;(推荐)或者_font-size:0; |
| 30 | 宽度超过width定义的宽 | IE6 | bug/fixed | 添加_overflow:hidden; |
| 31 | 双倍边距 | IE6 | ─ 常识 | 添加display:inline到float元素中 |
| 32 | margin负值隐藏：hasLayout的父元素内的非hasLayout元素，使用负边距时，超出父元素部分不可见 | IE6/7 | bug/fixed | 去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative; |
| 33 | 给两个浮动元素的某中一个的文字设定为斜体，另一个元素下拉在有斜体文字元素的下面 | IE6 | bug/fixed | 给有斜体文字的元素添加overflow:hidden; |
| 35 | 3px 间隔：在float元素后的元素，会有3px间隔 | IE6 | bug/fixed | 因为是确切的3px，所以，用“暴力破解”吧，比如_margin-left:-3px; |
| 35 | text-align 影响块级元素 | IE6/7 | bug/fixed | 整理你的float；或者分开设置text-align |