CSS：關於CSS Hack

　　CSS Hack因爲不一樣廠商的瀏覽器，如Internet Explorer，Safari，Mozilla Firefox，Chrome 等，或者是同一廠商的瀏覽器的不一樣版本，如IE6和IE7，對CSS的解析認識不徹底同樣，還因爲CSS中的優先級的關係，所以會致使生成的頁面效果不同，得不到咱們所須要的頁面效 果。 這個時候咱們就須要針對不一樣的瀏覽器去寫不一樣的CSS，讓它可以同時兼容不一樣的瀏覽器，能在不一樣的瀏覽器中也能獲得咱們想要的頁面效果。

　　換言之，，CSS Hack的目的就是使咱們的CSS代碼兼容不一樣的瀏覽器。固然，咱們也能夠反過來利用CSS hack爲不一樣版本的瀏覽器定製編寫不一樣的CSS效果。

 

CSS Hack的3種主要表現形式：

　　（一）CSS類內部Hack

 　　是指CSS屬性或屬性值里加上只有某個瀏覽器本身能夠識別的特殊字符串。CSS Hack主要針對類內部Hack：好比 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，而firefox兩個都不能認識。

body{
*background:black; /* IE6和IE7下的顯示 */
background:green; /* firefox下的顯示 */
}

　　（二）CSS選擇器Hack

 　　是指在CSS選擇器前面加上只有某種瀏覽器本身能夠識別的特殊字符串。如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。

　　（三）HTML頭部引用(if IE)Hack

　　這種形式主要是針對IE瀏覽器。針對全部IE：<!--[if IE]><!--代碼--><![endif]-->，針對IE6及如下版本：<!--[if lt IE 7]><!--代碼--><![endif]-->，這類Hack不只對CSS生效，對寫在判斷語句裏面的全部代碼都會生效。

<!--[if lte IE 8]> <!-- IE條件註釋--> 
<link src="iecss.css" rel="stylesheet" /> 
<![endif]--> 

這種寫法會被非IE的瀏覽器所忽略，只有IE瀏覽器纔會執行上面的代碼，上面這段代碼的意思是當IE的版本是8或者比8低的IE瀏覽器纔會執行下面的樣 式。例子中有一個運算符號lte，它是less than or equal to的簡寫，意思是小於等於，其餘的運算符號還有lt（less than，小於）、gte（greater than or equal to，大於等於）、gt（greater than，大於）。

 

經常使用的CSS Hack 方式：

　　（一）方式一：條件註釋法

只在IE下生效
<!--[if IE]>
這段文字只在IE瀏覽器顯示
<![endif]-->

只在IE6下生效
<!--[if IE 6]>
這段文字只在IE6瀏覽器顯示
<![endif]-->

只在IE6以上版本生效
<!--[if gte IE 6]>
這段文字只在IE6以上(包括)版本IE瀏覽器顯示
<![endif]-->

只在IE8上不生效
<!--[if ! IE 8]>
這段文字在非IE8瀏覽器顯示
<![endif]-->

非IE瀏覽器生效
<!--[if !IE]>
這段文字只在非IE瀏覽器顯示
<![endif]-->

　　（二）方式二：類內屬性前綴法

　　屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴，以達到預期的頁面展示效果。

在標準模式中：

• 「-″減號是IE6專有的hack
• 「\9″ IE6/IE7/IE8/IE9/IE10都生效
• 「\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
• 「\9\0″ 只對IE9/IE10生效，是IE9/10的hack

　　（三）方式三：選擇器前綴法

　　選擇器前綴法是針對一些頁面表現不一致或者須要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。

　　目前最多見的是：

*html *前綴只對IE6生效

*+html *+前綴只對IE7生效

@media screen\9{...}只對IE6/7生效

@media \0screen {body { background: red; }}只對IE8有效

@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效

@media screen\0 {body { background: green; }} 只對IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效等等