CSS Hack

1、css hack定義

 

因爲不一樣的瀏覽器，好比Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，對CSS的解析認識不同，所以會致使生成的頁面效果不同，得不到咱們所須要的頁面效果。 這個時候咱們就須要針對不一樣的瀏覽器去寫不一樣的CSS，讓它可以同時兼容不一樣的瀏覽器，能在不一樣的瀏覽器中也能獲得咱們想要的頁面效果。

這個針對不一樣的瀏覽器寫不一樣的CSS code的過程，就叫CSS hack!

 

2、css hack原理及分類

 

因爲不一樣的瀏覽器對CSS的支持及解析結果不同，外加CSS中的優先級的關係，咱們就能夠根據這個來針對不一樣的瀏覽器來寫不一樣的CSS。

 

一、CSS Hack大體有3種表現形式：

（1）類內部Hack：好比 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，而firefox兩個都不能認識，等。

（2）選擇器Hack：好比 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}，等。

（3）HTML頭部引用(if IE)Hack：針對全部IE：<!--[if IE]><!--您的代碼--><![endif]-->，針對IE6及如下版本：<!--[if lt IE 7]><!--您的代碼--><![endif]-->，這類Hack不只對CSS生效，對寫在判斷語句裏面的全部代碼都會生效。

 

書寫順序：通常是將識別能力強的瀏覽器的CSS寫在前面。

 

3、css hack寫法總結

IE hack

   全部的ie瀏覽器均可識別\9

IE6 hack

_     只有ie6能識別_

IE7 hack

*     只有ie六、ie7能夠識別*

IE8 hack

  只有ie八、ie9能夠識別\0

IE9 hack

  只有ie八、ie9能夠識別\9\0

因此的瀏覽器都支持

 

 

在這裏要解釋一下，看到網上有關於ie6不支持！important，也有關於ie7不支持！important的說法，通過反覆試驗，感受這樣說都是不穩當的，應該說全部的瀏覽器都支持！important，關鍵是要寫對順序，詳見 CSS：！important，

一些CSS Hack因爲瀏覽器存在交叉認識，因此須要經過層層覆蓋的方式來實現對不一樣瀏覽器進行Hack的，全部書寫順序很重要。

最後舉個例子來講明：

div{color:red; color:green\9;*color:blue;_color:yellow}

結果是：谷歌和火狐下是紅色；ie8和ie9下是綠色；ie7下是藍色；ie6下是黃色