詳解css hack的分類和css hack三種方式

全文引自這裡，很棒的一篇文章

• what
  由於不同廠商的瀏覽器或某瀏覽器的不同版本（IE6~IE11，Firefox/Safari/Opera/Chrome等），對css的支援、解析不一樣。這時，我們為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同的版本寫特定的css樣式，把這個針對不同瀏覽器/不同版本寫相應的css code的過程叫做css hack。

• how
  由於不同的瀏覽器和瀏覽器的各版本對css的支援及解析結果不一樣，以及css優先順序對瀏覽器展現效果的影響，我們可以據此針對不同的瀏覽器情景應用不同的css。

• css hack 分類
  有三種表現形式，css屬性首碼法，選取器首碼法，以及IE條件注釋法。

• 屬性首碼法（即類內部hack）

• 選取器首碼法

• IE條件注釋法
  css hack一般是將適用範圍廣，被識別能力強的css定義在前面。

• css hack方式一：條件注釋法（適用於IE10以下，IE10以後不再支援條件注釋）

• gt：greater than，選擇條件版本以上版本，不包含條件版本。
  lt： less than ，選擇條件版本以下版本，不包含條件版本。
  gte：greater than or equal ，選擇條件版本以上版本，包含條件版本。
  lte：less than or equal ，選擇條件版本以下版本，包含條件版本。
  ！：選擇條件版本以外所有版本，無論高低。

• 條件注釋屬性：

• 執行個體

     <!--[if IE]>   <p class="p1">只在IE5、6、7、8、9下顯示</p>   <![endif]-->   <!--[if ! IE]><!-->   <p class="p5">非IE</p>   <!--<![endif]-->

  html指令碼中平常的注釋方法<!-- -->，條件注釋法只有IE10以下的IE瀏覽器可以識別，對於別的瀏覽器那麼就只能看見的是一對封閉的不起作用的注釋。對於非IE 的注釋，注意裡面有一個<!-->是起到封閉注釋的作用。

     <!--[if IE 6]>   <p class="p2">只在IE6下顯示</p>       <![endif]-->   <!--[if gte IE 6]>   <p class="p3">只在IE6以上版本</p>       <![endif]-->   <!--[if ! IE 8]>   <p class="p4">非IE8的的IE瀏覽器</p>   <![endif]-->

• css hack方式二：類內屬性首碼法
  屬性首碼是在CSS樣式屬性名稱上加上一些只有特定瀏覽器才能識別的hack首碼，已達到預期的頁面展現效果。
  以下討論的是標準模式中的hack方法

• 規則
  *color：IE5.5、6、7
  +color : IE5.5、6、7
  ＃color : IE5.5、6、7
  -color：IE5.5、6
  ＿color: IE5.5、6
  這幾個當中，我喜歡用＊與 ＿
  color\0 : IE8、9、10、11（12以上沒測）（此處有些地方說歐朋也識別，可是我測試啦，不管用，不知道啊）
  color\9 : IE6、7、8、9、10（11不支援）
  color\9\0:IE8、9、10（其他不支援）
  \9\0取了共集
  color:red!important;提高該設定的優先順序

• css hack方式三：選取器首碼法

• 規則
  @media screen\9{……}（只對IE6、7生效）
  @media \0screen{……}（只對IE8生效）
  @media \0screen\,screen\9{……}（對IE6,7,8生效）
  @media screen\0{……}（只對IE8、9、10生效）
  @media screen and (min-width:0\0){……}（只對IE9，10有效）
  @media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){……}（對IE10,11有效，以上沒測）

• hack 利弊
  盡量避免使用css hack，但有些情況下，為了顧及使用者體驗實現向下相容，不得已才使用hack。但過多使用會造成html文檔混亂不堪，增加管理和維護的負擔。

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤（2）－css視頻教程