詳解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腳本中平常的註解方法19791207a4e0a22c816ac020ecd8cae0，條件註解法只有IE10以下的IE瀏覽器可以識別，對於別的瀏覽器那麼就只能看見的是一對封閉的不起作用的註解。對於非IE 的註釋，注意裡面有一個4e255cca6c1c1c2b4c46e2b80a10fe99是起到封閉註釋的作用。

     <!--[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影片教學

#

以上是詳解css hack的分類和css hack三種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！