了兼容IE各个版本，需要在CSS中添加额外的代码，比如以前常用的_width。之所以工作，是因为浏览器会忽略不能解析的样式规则，因此举个例子来说，把_width写在width下面，对于非IE浏览器会解析到width，而对于IE6来说，会用_width覆盖前面的width规则，从而达到针对IE6浏览器的兼容。对于IE其他版本(6~11)，也存在同样的兼容性处理方法。

下面是一个速查表：

div {

property:value>property:value\0; /* ie 8/9*/<; /* ie 8/9*/

property:value>property:value\9\0; /* ie 9*/<; /* ie 9*/

*property:value; /* ie 7*/

_property:value; /* ie 6*/

}

IE 6

* html .ie6 {property:value;}

or

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

or

*:first-child+html .ie7 {property:value;}

IE 6 and 7

@media screen {

.ie67 {property:value;}}

or

.ie67 { *property:value;}

or

.ie67 { #property:value;}

IE 6, 7 and 8

@media >@media \0screen\,screen\9 {

.ie678 {property:value;}}

IE 8

html>/**/body .ie8 {property:value;}

or

@media >@media \0screen {

.ie8 {property:value;}}

IE 8 Standards Mode Only

.ie8 { property /*\**/: value }

IE 8,9 and 10

@media screen>@media screen\0 {< {

.ie8910 {property:value;}}

IE 9 only

@media screen and (min-width:0>@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {<) and (min-resolution: .001dpcm) {

// IE9 CSS

.ie9{property:value;}}

IE 9 and above

@media screen and (min-width:0>@media screen and (min-width:0\0) and (min-resolution: +72dpi) {<) and (min-resolution: +72dpi) {

// IE9+ CSS

.ie9up{property:value;}}

IE 9 and 10

@media screen and (min-width:0>@media screen and (min-width:0\0) {<) {

.ie910{property:value;} /* backslash-9 removes ie11+ & old Safari 4 */}

IE 10 only

_:-ms-lang(x), .ie10 { property:value; }

IE 10 and above

_:-ms-lang(x), .ie10up { property:value; }

or

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

.ie10up{property:value;}}

IE 11 (and above..)

_:-ms-fullscreen, :root .ie11up { property:value; }

么是css hack

由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack（针对不同的浏览器写不同的css code的过程即css hack，也叫写css hack）

css hack可翻译为：浏览器兼容性、兼容方案、简略兼容浏览器。

常用的CSS hack 有三种方式：

CSS 内部hack、选择器hack、HTML 头部引用，其中第一种最常用。

CSS hack原理

1.利用浏览器自身的bug来实现特定浏览器的样式；

2.利用浏览器对CSS的完善度来实现，例如某些CSS规则或语法的支持程度，原理类似目前我们经常使用的 -wekit-之类的属性。

1.CSS 内部hack

在CSS3中常见一些这样的写法：

/*Mozilla内核浏览器：firefox3.5+*/

-moz-transform: rotate | scale | skew | translate ;

/*Webkit内核浏览器：Safari and Chrome*/

-webkit-transform: rotate | scale | skew | translate ;

/*Opera*/

-o-transform: rotate | scale | skew | translate ;

/*IE9*/

-ms-transform: rotate | scale | skew | translate ;

/*W3C标准*/

transform: rotate | scale | skew | translate ;

CSS3目前标准还没有统一，各个浏览器都有自己的表现方式，甚至有的实现，有的未实现，在前面加一些前缀以表示支持某个

特定浏览器，这也是CSS 内部hack的基本原理，但真正的CSS hack 远远不止于此，因为仍有IE6及其各种奇葩的版本。

语法：

selector{property:value;}

上面代码所示的是在属性名称之前的hack；

当然还有以下的写法：

*background-color:green;

属性前面加个“*”这样的写法只会对IE6、7生效，其它版本IE及现代浏览器会忽略这条指令（没有特殊说明，本文所有hack都是指

在声明了DOCTYPE的文档的效果）

-background-color:green;

属性前面有个“-”这样的只有IE6识别，还有些在后面的hack

background-color:green!important;

这样在属性值后面添加“!important”的写法只有IE6不能识别，其它版本IE及现代浏览器都可以识别，还有“+”、“>这样在属性值后面添加“!important”的写法只有IE6不能识别，其它版本IE及现代浏览器都可以识别，还有“+”、“\0”、”\9” 等。<”、”” 等。

如果只想在IE访问的时候加绿色背景，就可以这么写

background-color:green;

2.选择器hack

选择器hanck主要是针对IE浏览器，不怎么常用

语法： selector{ sRules }

针对IE9的hack可以这么写：

:root .test{

background-color:green;

}

3.HTML头部引用

HTML头部引用就比较特殊了，类似于程序语句，只能使用在HTML文件里，而不能在CSS文件中使用，并且只有在IE浏览器下才能执行，这个代码在非IE浏览下不是执行该条件下的定义，而是当做注释视而不见。

?

1

<!--– 默认先调用css.css样式表 –-->

注意：以开头，以结尾。

解释：

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt ：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

! ：就是不等于的意思，跟javascript里的不等于判断符相同。

书写顺序：先一般，再特殊！！

例：

_background-color:red;

background-color:green;

在IE6解析的时候，第一句能够识别，背景设为红色，但是第二句所有浏览器都识别，IE6也不例外，背景颜色又被设为绿色，

所以得反过来写

background-color:green;

_background-color:red;

所以：先一般，再特殊！！