转司徒正美
说是实现兼容，其实也只不过为了照顾IE6与IE7，其实不支持标准的对手早就烟飞灰灭，而像firefox，Opera，Safari等更新换代太快，就算有问题很快就被官方处理。因此这篇博文大家最好在IE6中浏览，里面可运行的例子都是为IE6准备的。
-
选择器
- 通配符 * :: IE6不支持
- 类选择器 .class :: IE6元素的class不能超过2个
- 属性选择器 [att=value] [att] [att|=value] [att(^|$|~)=value] :: IE6不支持
- 关系选择器 E + F; E > F ; E ~ F :: IE6不支持
- 属性选择器 [att=value] [att] [att|=value] [att(^|$|~)=value] :: IE6不支持
- :first-letter,:first-line,:visited,:link伪类选择器 :: 都支持
- :hover伪类选择器 :: IE6只支持a元素(并且一定要有href属性才行)，IE7及FF支持a以外元素
- :before和:after伪类选择器 :: IE7和firefox支持
- 结构伪类选择器 ::只有最新的游览器才支持这种CSS3选择符，FF3.5，opera10与chrome。IE全系列歇菜。
说说用法：
E:root 匹配文档的根元素
:root {border:1pxsolidblue; }//相当于html {border:1pxsolidblue; }E:nth-child(n) 匹配所有在其父元素中排第n个的E元素。n可以是数字/关键字/公式
tr:nth-child(3) { …… }/* 匹配所有表格里面排第3的行 */tr:nth-child(2n+1) { …… }/* 2n+1，公式，匹配所有奇数行 */tr:nth-child(odd) { …… }/* odd：关键字，匹配所有奇数行 */tr:nth-child(2n) { …… }/* 2n：匹配所有偶数行*/tr:nth-child(even) { …… }/* even：关键字，匹配所有偶数行li */E:nth-last-child(n) 伪类同:nth-child的工作方式非常相似，不过他是从后向前数子节点
tr:nth-last-child(3n+3) {background-color:red; }tr:nth-last-child(3n+2) {background-color:green; }tr:nth-last-child(3n+1) {background-color:blue; }E::nth-of-type(n)伪类使用跟其他伪类类似的语法，但是允许你根据元素类型进行选取。
body:nth-of-type(1) p{color:#333333;}:nth-last-of-type同:nth-of-type功能类似，不过也是从后向前查子节点。
-
DocType
文档类型决定了IE的渲染模式，标准模式(standard)还是兼容模式(quirks),并且声明必须放在所有代码之前,包括注 释。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">不过推荐使用<!doctype html>，游览器自动会把它渲染成严格模式，而且它还是HTML5的唯一合法DocType。
Quirks模式与Standards模式的区别
quirks和standards的区别很多都可以归为IE5和IE6的区别。
- 盒模型 标准模式,实际宽度=border-left + padding-left + width + padding-right + border-right兼容模式下,实际宽度 = width
- 水平居中 IE中,标准模式下可使用margin:0 auto水平居中。兼容模式下无效。
- 行内元素尺寸 在标准模式下，给span等行内元素设置wdith和height都不会生效，兼容模式下可以。
- 不正确的语法 如没有书写尺寸单位，大小写不正确，嵌套不正确等，兼容模式下尺寸采用默认单位px，其它的都尽量修正。标准模式下这条css规则无效。
- 相对高度 元素设定百分比高度时，需要父元素高度已指定，所以最好先指定html和body元素高度为100%
- white-space: pre属性 IE6只有在标准模式中才支持这效果，相当于<pre>标签。
- 在quirk模式中，设置图片的padding会失效，Table中的字体属性不能继承上层的设置。
- IE7的新CSS特性 min/max-width/height,position:fixed,:hover,overflow:visible 等在兼容模式下会失效。
- 默认样式 FF下，在进入quirks模式后，会加载其目录下的res/quirk.css，设置一些其它的默认样式
- 盒模型 标准模式,实际宽度=border-left + padding-left + width + padding-right + border-right兼容模式下,实际宽度 = width
-
属性
-
z-index
select元素在IE6，IE7中windowed元素，优先级比其他元素高，要想遮住它只靠同是windowed元素的iframe与object元素。
FLASH默认的wmode为window模式，浮动在其它html元素的上方，我们也无法通过z-index来遮住它。需要将wmode指定为transparent或者opaque。
- cursor FF 不支持cursor:hand,使用cursor:pointor
-
消除图片工具栏
<img src="picture.jpg" galleryimg="false"/ >
<!-- 又或者 -->
<head>
<meta http-equiv="imagetoolbar" content="no">
</head>
-
防止图片放大失真
.pic {-ms-interpolation-mode: bicubic}
- 列表取消缩进 IE margin:0;FF padding:0
-
自动折行
-
DIV
.wrap1 {
word-break:break-all;
word-warp:warp;
over-flow:auto!important;
}
.wrap2 {
white-spacing:normal;
word-warp:warp;
over-flow:auto!important;
}
-
TABLE
table{ table-layout:fixed; }
-
-
固定宽度不折行
<td width="25%" nowrap><div>content</div></td>
-
消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效。
-
去掉空DIV在IE的默认高度(
.empty{ line-height:0%; height:0px; font-size:0pt; }
-
-
滤镜(filter)
IE私有，效率也比较低，一般不建议使用。
-
透明
.transparent{
filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);/*IE8*/
filter:alpha(opacity=50);/*IE5,6,7*/
-moz-opacity: .5;/*FF*/
opacity: .5;/*W3C*/
}
-
-
behavier与CSS Expression
IE私有的东西，实现CSS的动态编程，效率代下，现在用的人也不多了。
-
CSS Bug
-
IE5.5及其低版本的盒子模型Bug
这是IE的盒子模型的宽高是包含border与padding的
解决办法:前面定义的是在IE5.5-的宽与高，后面重新定义一下在标准模式中的宽与高
.box {
400px;margin:40px;border:4px solid red;padding:40px;
widt/h:240px;
}
或者
.box {
400px;margin:40px;border:4px solid red;padding:40px;
voice-family:""}"";
voice-family:inherit;
240px;
}
PS:现在我基本放弃对IE5.5以下的兼容。
-
双倍margin Bug
在IE6中，如果多个浮动元素并排显示时，且如果是左浮动并且设置了margin，那么左边第一个元素的margin-left会加倍；
如果是右浮动并设置了margin,那么右边第一个元素的margin-right会加倍；
如果浮动元素够多，发生折行现象，那么每行第一个（从左边数起还是从右边数起，是margin-left还是margin-right，参考上面）元素的margin会加倍。
如果有两元素，一个有浮动一个无浮动，无论浮动元素在上还是在下，浮动元素的margin-left(或margin-right)都会加倍！
解决办法:在浮动元素的样式中设置display:inline。
预览Bug
另一个演示：
-
父元素不能自适应子元素高度
严格来说，这不是个Bug，但这是在布局中经常要用到父元素自适应子元素高度。 IE6会“聪明”地做到这一点，FF，IE7，IE8，OP等追随标准的游览器却不是这回事。我们要手动让父元素自适应。
解决办法:父元素样式中显示地增加overflow:auto，但为了与IE6兼容， 我们需要增加一个辅助元素，定义为clear:both，强制撑开父元素高度。
#parent {
overflow:auto;/*★★重点★★*/
border:1px solid #000;
}
.children{
display:inline;
float:left;
background:#ff0;
margin:50px;
80px;
height:80px;
border:10px solid red;
}
/*解决IE父元素的overflow属性为auto时出现出现收缩现象，
同时解决IE父元素不能解析margin-bottom的问题*/
.clear {clear:both;}
下面是解决后的效果。
-
IE子元素底边界不被解析Bug
根据CSS规则，没有定义float属性的父元素不会自动计算高度，要计算高度，必须在子元素的最后添加一个辅助元素，并设置clear:both。
如果我们查看《On having layout》这篇伟大的文章，里面有更多的方法，如zoom:1,由于它们都是比较危险且难以通过校验，因此建议使用官方的。
因此我就把父元素也浮动吧，这个以前我也在多篇博文中提过，这种浮动嵌套会产种向内收缩的现象。
注意和上面“父元素不能自适应子元素高度”的解决方案比较，它们只有稍微的差异。
解决办法:父元素也浮动。
解决演示
-
注释Bug
又名为浮动容器的字符复制BUG。
出现条件:在浮动的DIV元素的旁边添加注释，div内部的文字会被复制（复制的个数和注释的个数相同），并置于浮动元素的下方。
解决办法:不要注释。
Bug演示
-
E6下absolute定位相差1px的Bug
1.外层元素用position:relative定位，并且实际content宽/高为奇数；
2.内层元素使用position:absolute定位，并且使用了bottom/right定位。
解决办法:父元素的宽高设为偶数。
Bug演示
-
IE6中line-height属性失效
如果我们想实现单行文本垂直居中，利用CSS有一个简捷的方法，就是设置height与line-height等高了， 但现在注意了，万恶的IE6又给我们找麻烦来了！
出现条件：IE6下，line-height对带有置换元素的整行文字不起作用，应该是撤撤底底的无效，换句话说置换元素是没有行间距的。 这里我们首先要知道的是什么是置换元素，W3C官方对于置换元素的解释为——置换元素（replaced element）主要是指 img，input，textarea，select，object等这类默认就有CSS格式化外表范围的元素。
解决办法:添加以下样式
*html input,img,select,textarea{margin:计算得到的半间距px 0;vertical-align:middle;}
半间距的公式为(line-height - font-size)/2
相关演示
-
3像素Bug
研究布局时不得不注意的Bug!
出现条件：在IE6中，当浮动元素与浮动的文本并列相邻时， 与浮动元素高度相同的浮动文本会与其容器的border(是border-left或border-right看这两个父容器的具体位置)之间多出三像素。
解决办法:激活浮动文本父元素的hasLayout属性，zoom:1或height:1%；最土的方法就是让浮动元素靠流行文本的那一边的边界减去3像素。
Bug演示
此外还有许多许多，如IE捉迷藏，断头台，百分比等等，解法都比较简单，以后有机会再补充……
-
-
CSS hack
网上有关这东西太多了，不想多说了，给出几个例子。
.e{
color:#FFF;/* FF,OP,IE8 */
[;color:#0F0;]/* Sa,CH */
*color:#FF0;/* IE7 */
_color:#F00;/* IE6 */
}
.e{
background-color:#332200;/* FF*/
}
html* .e{
background-color:#FF00FF;/* Sa IE7 CH */
}
*+html .e{
*background-color:#0000FF;/* IE7 */
}
* html .e{
background-color:#00FFFF;/* IE6 */
}
html*~/**/body .e{
background-color:#055000;/* IE8 */
}
@media all and(min-0){
.e{/*Opera 9.50 beta测试通过,10.0 beta以上无效*/
background-color:#FF5500;
}
}
button[type] {
padding:3px 10px 4px 7px; /* Firefox */
padding:5px 10px 5px 7px ; /*IE8 */
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
button[type] {
padding:3px 10px 3px 7px; /* Safari */
line-height:17px; /* Safari */
}
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
head~body button[type] {
padding:4px 10px 4px 7px; /*Opera */
line-height:17px; /* Opera */
}
}