針對IE6\7\8\9\10瀏覽器的CSS hack大全詳解

目前IE內核瀏覽器仍然是國內主流瀏覽器，佔據着PC瀏覽器的大部分市場份額，版本從IE6到IE10，全部前段工做者都必須面對和解決多個IE瀏覽器對代碼的兼容性問題。在不少狀況下，咱們須要專門針對IE寫css樣式，即針對IE的css hack，下面將詳細介紹這些內容：

一、常見的特殊符號的應用：

IE6：

_selector{property:value;}

selector{property:value;property:value !important;} //IE6 不支持同一選擇符中的 !important

IE7：

+selector{property:value;}

IE8：

selector{property:value\0;}

IE6 & IE7：

*selector{property:value;}

IE6 & IE7 & IE8：

selector{property:value\9;}

總結起來，以下：

其中，S表示Standards Mode即標準模式，Q表示Quirks Mode，即兼容模式。

（瞭解更多Quirks模式、Strict(Standars)模式？）

hack	示例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)
*	*color	Yes	Yes	Yes	Yes	No	Yes
+	+color	Yes	Yes	Yes	Yes	No	Yes
-	-color	Yes	Yes	No	No	No	No
_	_color	Yes	Yes	No	Yes	No	Yes
#	#color	Yes	Yes	Yes	Yes	No	Yes
\0	color\0	No	No	No	No	Yes	No
\9	color\9	Yes	Yes	Yes	Yes	Yes	Yes
!important	color:blue !important; color:green;	No	No	Yes	No	Yes	No

二、條件註釋語句（<!--[if IE]> <![endif]-->）

<!--[if IE]> 全部的IE可識別 <![endif]-->
<!--[if !IE]><!--> 除IE外均可識別 <!--<![endif]-->
<!--[if IE 6]> 僅IE6可識別 <![endif]-->
<!--[if lt IE 6]> IE6如下版本可識別 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
<!--[if IE 7]> 僅IE7可識別 <![endif]-->
<!--[if lt IE 7]> IE7如下版本可識別 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
<!--[if IE 8]> 僅IE8可識別 <![endif]-->
<!--[if IE 9]> 僅IE9可識別 <![endif]-->

lt 表示less than 當前條件版本如下的版本，不包含當前版本。

gte 表示greeter than or equal 當前版本以上版本，幷包含當前版本。

lte 表示less than or equal 當前版本如下版本，幷包含當前版本。

三、meta聲明

因爲IE8 可能會將頁面按照 IE7 模式進行渲染，針對 多版本IE的現狀，一般會採用設置 X-UA-Compatible HTTP 頭的方式將頁面在IE中採用統一的渲染模式。

<meta http-equiv="X-UA-Compatible" content="IE=7"> //標準 IE7 模式

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> //兼容 IE7 模式

<meta http-equiv="X-UA-Compatible" content="IE=Edge">//標準 IE 模式

四、其餘（/*\**/註釋法）

網上也流傳着這樣一種ie hack方法

.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA識別*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA識別*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8識別*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8識別*//*「color」和「/*\**/」之間有個空格*/

轉自請註明文章轉自五月蘭博客：http://www.wuyuelan.com/1322