CSS hack 區塊

單一特徵 | 區塊 | 註解條件式

html*

html* 在 IE7（及以下版本）, Safari, Chrome 會解讀為 html *；但是在 Firefox 會視為錯誤，而忽略其設定。

* html

* html 語意是 html 是子元素，這在大部分瀏覽器都是錯誤，但是 IE6 卻解讀成功。

*+html

*+html 語意是 html 接在 * 之後，這在大部分瀏覽器都是錯誤，但是 IE7 卻解讀成功。 <style type='text/css'> .hksphtml { color:red } HTML* .hksphtml { color:yellow } *+HTML .hksphtml { color:green } *HTML .hksphtml { color:blue } </style> <div class=hksphtml> 此段文字，在 IE6 是藍色；??? 是綠色；Firefox 是紅色；Safari, Chrome 是黃色。 </div>

• 風格用法：

  <style type='text/css'>
  .hksphtml        { color:red }
  HTML*  .hksphtml { color:yellow }
  *+HTML .hksphtml { color:green }
  *HTML  .hksphtml { color:blue }
  </style>
  <div class=hksphtml>
  此段文字，在 IE6 是藍色；??? 是綠色；Firefox 是紅色；Safari, Chrome 是黃色。
  </div>
  

• 執行結果：
  此段文字，在 IE6 是藍色；??? 是綠色；Firefox 是紅色；Safari, Chrome 是黃色。

:ROOT

請參考 :ROOT 的應用。

:visited 與 :link

:link 與 :visited 是互相衝突的。:link:visited 與 :visited:link 在 IE7（及以下版本）會被解讀為 :visited 與 :link；在 Firefox, Safari, Chrome 則視為錯誤，會被忽略。 <style type='text/css'> .hklink:link { color:red } .hklink:visited:link { color:green } </style> <a class=hklink href='some@place'> 此段文字，在 IE 是綠色；在 Firefox, Safari, Chrome 是紅色。 </a>

• 風格用法：

  <style type='text/css'>
  .hklink:link         { color:red }
  .hklink:visited:link { color:green  }
  </style>
  <a class=hklink href='some@place'>
  此段文字，在 IE 是綠色；在 Firefox, Safari, Chrome 是紅色。
  </a>
  

• 執行結果：
  此段文字，在 IE 是綠色；在 Firefox, Safari, Chrome 是紅色。

@import

請參考 @import 的應用。

BODY.empty

請參考 BODY.empty 的應用。

:NOT()

請參考 :NOT() 的應用。

> 符號

> 符號用於 CSS hack 有兩個原因：（一）IE6 沒有支援 > 符號。（二）IE7 使用 > 符號 時，如果左右兩邊少了元素，會被解讀為 *；例如 >body 解讀成 *>body，其它瀏覽器會認出此錯誤，而忽略其設定。IE7 在 + 符號, ~ 符號，都有前述問題。 <style type='text/css'> .hkright { color:blue } *>BODY .hkright { color:red } >BODY .hkright { color:green } </style> <div class=hkright> 此段文字，在 IE6 是藍色；??? 是綠色；Firefox, Safari, Chrome 是紅色。 </div>

• 風格用法：

  <style type='text/css'>
  .hkright        { color:blue }
  *>BODY .hkright { color:red  }
  >BODY  .hkright { color:green  }
  </style>
  <div class=hkright>
  此段文字，在 IE6 是藍色；??? 是綠色；Firefox, Safari, Chrome 是紅色。
  </div>
  

• 執行結果：
  此段文字，在 IE6 是藍色；??? 是綠色；Firefox, Safari, Chrome 是紅色。

/**/

在選擇器間插入註解 /**/，在 IE7 視為錯誤；其它瀏覽器解讀成功。 <style type='text/css'> HTML/**/ .hkcomment { color:blue } HTML>BODY .hkcomment { color:green } HTML>/**/BODY .hkcomment { color:red } </style> <div class=hkcomment> 此段文字，在 IE6 是藍色；??? 是綠色；Firefox, Safari, Chrome 是紅色。 </div>

• 風格用法：

  <style type='text/css'>
  HTML/**/  .hkcomment  { color:blue }
  HTML>BODY .hkcomment  { color:green  }
  HTML>/**/BODY .hkcomment { color:red  }
  </style>
  <div class=hkcomment>
  此段文字，在 IE6 是藍色；??? 是綠色；Firefox, Safari, Chrome 是紅色。
  </div>
  

• 執行結果：
  此段文字，在 IE6 是藍色；??? 是綠色；Firefox, Safari, Chrome 是紅色。