Hacks 語法的整理：
- 只有 IE6 才能解析的屬性，在屬性名稱之前加上一個底線 ( _ )
- 只有 IE6, IE7 才能解析的屬性，在屬性名稱前面加上星號 ( * ) 或井號 ( # )
- 只有 IE7, IE8, IE9 才能解析的屬性，在屬性名稱後面加上一個空白與一個註解 ( /**/ )
- 只有 IE6, IE7, IE8, IE9 才能解析的屬性，在屬性值最後加上一個 \9 字串
- 只有 IE8, IE9 才能解析的屬性，在屬性值最後加上一個 \0/ 字串
#style1 { _color: blue }#style1 { *color: blue; }#style1 { #color: blue; }#style1 { color /**/: blue }#style1 { color: blue\9; }#style1 {color: blue\0/;} 選取器類型的密技 ( Selector Hacks )
- 只有 IE6 才能解析的選取器，在選取器名稱之前加上 * html
- 只有 IE7 才能解析的選取器，在選取器名稱之前加上 *+html 或 *:first-child+html
- 只有 IE8 才能解析的選取器，在整個 CSS 樣式規則前後用以下 @media \0screen 定義
- 只有 IE9 才能解析的選取器搭配屬性 Hack，在選取器名稱之前加上 :root 與屬性值後面加上\9
- 只有 IE7, Firefox, Safari, Opera 才能解析的選取器，在選取器名稱之前加 html>body
- 只有 IE8, IE9, Firefox, Safari, Opera 才能解析的選取器，在選取器名稱之前加 html>/**/body
- 只有 Opera 9.27 以下與 Safari 2 才能解析的選取器，在選取器名稱之前加 html:first-child
- 只有 Safari 2 ~ 3 才能解析的選取器，在選取器名稱之前加 html[xmlns*=""] body:last-child
- 只有 Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+才能解析的選取器，在選取器名稱之前加body:nth-of-type(1) 或 body:first-of-type
- 只有 Safari 3+, Chrome 1+ 才能解析的選取器，在整個 CSS 樣式規則前後用以下 @media 定義
- 只有 iPhone 與 Mobile Webkit 的瀏覽器才能解析的選取器
- 只有 Safari 2 ~ 3.1 才能解析的選取器，在選取器名稱之前加 html[xmlns*=""]:root
- 只有 IE6, IE7, IE8 才無法解析的選取器，在選取器名稱之前加 :root *>
- 只有 Firefox 1.0+ 才看的懂得選取器，在選取器名稱後面加上 , x:-moz-any-link
- 只有 Firefox 3.0+ 才看的懂得選取器，在選取器名稱後面加上 , x:-moz-any-link, x:default
- 只有 Firefox 3.5+ 才看的懂得選取器，在選取器名稱前面加 body:not(:-moz-handler-blocked)
* html #style1 { color: red }*+html #style1 { color: red } *:first-child+html #style1 { color: red }@media \0screen { .style1 {color: red;} }:root #style1 {color: #FF0000\9;}html>body #style1 { color: red }html>/**/body #style1 { color: red }
html:first-child #style1 { color: red }html[xmlns*=""] body:last-child #style1 { color: red }
body:nth-of-type(1) #siete { color: red } body:first-of-type #ocho { color: red }
@media screen and (-webkit-min-device-pixel-ratio:0) { #style1 { color: red } }@media screen and (max-device-width: 480px) { #style1 { color: red } }html[xmlns*=""]:root #style1 { color: red }
:root *> #style1 { color: red }#veinticuatro, x:-moz-any-link { color: red }#veinticuatro, x:-moz-any-link, x:default { color: red }body:not(:-moz-handler-blocked) #veinticuatro { color: red }
<!--[if IE 8]> <p>Welcome to Internet Explorer 8.</p> <![endif]-->
紅字部分要完全一樣才可以生效。
把條件式註解變成條件式標籤：
<![if IE 8]> <p>此內容只會在 IE8 與其他非 IE 瀏覽器顯示</p> <![endif]>
「條件式標籤」差別僅在於把 -- 字元給刪除。
在條件式註解的判斷式中可以寫判斷條件的語法：
- ! NOT 邏輯運算 [ 注意: 判斷 !IE 時應該要用條件式標籤才對 ]
- lt 小於
- lte 小於等於
- gt 大於
- gte 大於等於
- ( ) 子條件式
- & AND 邏輯運算
- | OR 邏輯運算
- true 永遠為真的邏輯運算，等同於 [if IE] 判斷式
- false 永遠為假的邏輯運算，等同於 [if !IE] 判斷式
<![if !IE]> <p>任何非 Internet Explorer 瀏覽器</p> <![endif]>
<!--[if lt IE 9]> <p>任何小於 IE9 的瀏覽器，例如: IE8, IE7, IE6 </p> <![endif]-->
<!--[if lte IE 8]> <p>任何小於等於 IE8 的瀏覽器，例如: IE8, IE7, IE6 </p> <![endif]-->
<!--[if gt IE 7]> <p>任何大於 IE7 的瀏覽器，例如: IE8, IE9 </p> <![endif]-->
<!--[if gte IE 7]> <p>任何大於等於 IE7 的瀏覽器，例如: IE7, IE8, IE9 </p> <![endif]-->
<!--[if !(IE 8)]> <p>任何非 IE8 的 IE 瀏覽器，例如: IE6, IE7, IE9 </p> <![endif]-->
<!--[if (gt IE 6) & (lt IE 9)]> <p>僅大於 IE6 以及小於 IE9 的瀏覽器，例如: IE7, IE8</p> <![endif]—>
<!--[if (IE 7) | (IE 8)]> <p>僅 IE7 與 IE8 瀏覽器</p> <![endif]-->
<!--[if true]> <p>在 IE 瀏覽器中永遠顯示</p> <![endif]—>
<!--[if false]> <p>在 IE 瀏覽器中永不遠顯示</p> <![endif]-->
活用條件式註解或條件式標籤的技巧有很多，你不只可能那來顯示不同的 HTML 內容，還可以用來載入不同的 CSS 檔，這種撰寫技巧又被稱為條件式樣式表 (Conditional stylesheets)，如下範例所示，你可以透過條件式註解來完成條件式樣式表的載入，如此一來就可以避免在 CSS 樣式表內使用「不安全」的 CSS Hacks 語法：
<!--[if lte IE 8]><link rel="stylesheet" href="lte-ie-8.css"><![endif]--> <!--[if lte IE 7]><link rel="stylesheet" href="lte-ie-7.css"><![endif]--> <!--[if lte IE 6]><link rel="stylesheet" href="lte-ie-6.css"><![endif]-->
還有一種撰寫技巧被稱為條件式類別名稱 (Conditional classnames)，這技巧經常用在 HTML5 的網頁裡，我們為了做到不支援 HTML5 的舊版瀏覽器也能讀取正確的樣式，有時會採用這種方式搭配 CSS 撰寫，達到不同 IE 版本也能套用不同樣式的目的。例如在 Initializr 與 HTML5 Boilerplate 這些 HTML5 範本產生器裡都能看到使用條件式類別名稱的技巧。
<!doctype html> <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--> <head>
透過條件式類別名稱的技巧，你的 CSS 內容就可以寫成以下這樣，也可以有效避免使用 CSS Hacks：
.style1 { color: black; } .ie8 .style1 { color: green; } /* IE8 */ .ie7 .style1 { color: blue; } /* IE7 */ .ie6 .style1 { color: red; } /* IE6 */
※ 注意事項 ※
微軟已經決定 Internet Explorer 10 之後的版本將移除條件式註解功能，因此下一代 IE 瀏覽器在解析條件式註解時將會與現有其他瀏覽器一樣，針對條件式註解或條件式標籤裡的條件式都會自動忽略，因此未來該功能只能用於 IE9 以下的瀏覽器裡。
<以上引用自 http://blog.miniasp.com/post/2012/05/02/Building-Website-is-not-that-easy-CSS-Hacks-and-IE-Conditional-Comments.aspx>
