了兼容IE各個版本，需要在CSS中添加額外的代碼，比如以前常用的_width。之所以工作，是因為瀏覽器會忽略不能解析的樣式規(guī)則，因此舉個例子來說，把_width寫在width下面，對于非IE瀏覽器會解析到width，而對于IE6來說，會用_width覆蓋前面的width規(guī)則，從而達到針對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來實現(xiàn)特定瀏覽器的樣式；

2.利用瀏覽器對CSS的完善度來實現(xiàn)，例如某些CSS規(guī)則或語法的支持程度，原理類似目前我們經(jīng)常使用的 -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目前標準還沒有統(tǒng)一，各個瀏覽器都有自己的表現(xiàn)方式，甚至有的實現(xiàn)，有的未實現(xiàn)，在前面加一些前綴以表示支持某個

特定瀏覽器，這也是CSS 內部hack的基本原理，但真正的CSS hack 遠遠不止于此，因為仍有IE6及其各種奇葩的版本。

語法：

selector{property:value;}

上面代碼所示的是在屬性名稱之前的hack；

當然還有以下的寫法：

*background-color:green;

屬性前面加個“*”這樣的寫法只會對IE6、7生效，其它版本IE及現(xiàn)代瀏覽器會忽略這條指令（沒有特殊說明，本文所有hack都是指

在聲明了DOCTYPE的文檔的效果）

-background-color:green;

屬性前面有個“-”這樣的只有IE6識別，還有些在后面的hack

background-color:green!important;

這樣在屬性值后面添加“!important”的寫法只有IE6不能識別，其它版本IE及現(xiàn)代瀏覽器都可以識別，還有“+”、“>這樣在屬性值后面添加“!important”的寫法只有IE6不能識別，其它版本IE及現(xiàn)代瀏覽器都可以識別，還有“+”、“\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瀏覽器下才能執(zhí)行，這個代碼在非IE瀏覽下不是執(zhí)行該條件下的定義，而是當做注釋視而不見。

?

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;

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