開發人員基本都知道，CSS的開發本身並不難，但是，當在不同的瀏覽器下測試代碼時，困難就出現了。瀏覽器的 bug 和不一致的顯示方式，是大多數CSS開發人員面臨的主要難題，你的設計在一種瀏覽器上看起來很好，而在另一種瀏覽器上可能會支離破碎。
實踐證明，CSS的相容性主要有兩種情況：一種是對老版本IE的相容性，一種是使用CSS3新特性後產生的相容性。
對老版本IE的相容性，主要通過CSS Hack和用戶端指令碼來解決；對使用CSS3新特性後產生的相容性，主要通過瀏覽器私人首碼來解決。 CSS Hack
由於不同廠商的瀏覽器（如IE、Chrome、Firefox、Safari），或同一瀏覽器的不同版本（如IE6~IE11），對CSS的解析不完全一樣，導致同一頁面在不同瀏覽器中的效果可能不一致。
為了得到統一的效果，就需要針對不同瀏覽器，或同一瀏覽器的不同版本，編寫不同的CSS，把這個過程就被稱作CSS Hack。
實踐證明，CSS Hack主要用來解決IE的相容性問題。雖然它是強有力的工具，但應該謹慎使用，它一般作為修複問題的最後一道屏障，在不得已的時候才會使用。因為更重要的是跟蹤、隔離和識別問題，而不是修複問題。只有真正瞭解問題背後的原理，才能找到最好的解決方案。
CSS Hack 有 3 種表現形式：
1）屬性首碼或尾碼法
即在定義樣式規則時，為樣式屬性添加只有特定瀏覽器，或某瀏覽器特定版本才能識別的首碼或尾碼。
| 首碼/尾碼 | 適用版本 | 應用樣本 |
|---|---|---|
| _ | IE6 | p { _color: blue; } |
| - | IE6 | p { -color: blue; } |
| + | IE7 | p { +color: blue; } |
| * | IE6/IE7 | p { *color: blue; } |
| # | IE6/IE7/IE8 | p { #color: blue; } |
| !important | IE7/IE8/IE9/IE10/IE11 | p { color: blue !important; } |
| \9 | IE6/IE7/IE8/IE9/IE10/IE11 | p { color: blue\9; } |
| \0 | IE8/IE9/IE10/IE11 | p { color: blue\0; } |
| \9\0 | IE9/IE10/IE11 | p { color: blue\9\0; } |
在使用屬性首碼或尾碼法時，一般是將適用範圍廣、被識別能力強的寫法寫在前面，把特殊寫法寫在後面。如：
div { background: blue; background: green\9; *background: black; _background: orange; }由於所有瀏覽器都識別標準寫法，而IE6/IE7/IE8/IE9/IE10/IE11可識別\9，IE6/IE7可識別*，IE6僅能識別_。根據CSS的疊加原理，後定義的屬性會覆蓋先定義的同名屬性，就實現了為IE各版本和現代瀏覽器應用不同樣式的目的。
2）選取器首碼法
即在CSS選取器前，添加只有特定瀏覽器或某瀏覽器特定版本才能識別的首碼，選取器和首碼之間用空格分隔。
常用的首碼有 *html 和 *+html，*html 是IE6特有的首碼，而 *+html 是IE7特有的首碼。如：
*html p { color: blue; } /* IE6 */ *+html p { color: blue; } /* IE7 */3）條件注釋法
條件注釋是IE瀏覽器專有的，也是微軟官方推薦的Hack方式。它是使用IE條件注釋，針對不同IE版本，編寫不同的CSS，來為不同版本的IE應用不同的樣式。
一種方法是直接在條件注釋中定義樣式。如：
<style> <!--[if IE 6]> div { display: inline; } <![endif]--> </style>雖然這種方法可以解決一些現實的問題，但這些注釋需要放在HTML檔案，而不是CSS檔案中，樣式定義散落在多個地方，不便於維護，也容易出錯。也違背了內容與表現相分離的原則，故不推薦使用。
另一種方法是，編寫不同的CSS檔案，再使用IE條件注釋，通過 <link> 標籤，有針對性的載入外部樣式表。如：
<!--[if IE 6]> <link rel="stylesheet" href="css/ie6.css" /> <![endif]-->這種方法卻會增加IE使用者的HTTP請求次數，影響訪問速度。所以，在使用這種方法前，要仔細斟酌，判斷是否真的有必要在自己的網站上使用它。
一個好訊息是，從IE10版本開始，不再支援條件注釋。這標誌著IE從此走向成熟、走向標準，Web設計師再也不必為IE的相容性問題所困擾了。
願望是美好的，現實卻是殘酷的。很多WEB設計師仍然發現，相同的CSS，在IE9/10/11上的渲染效果，和其它現代瀏覽器還是不一樣。
也就是說，我們仍然需要條件注釋。那麼，在不支援條件注釋的IE10/11上，能夠實現條件注釋的效果呢。
答案是肯定的。並且，有多種方法可以實現條件注釋的替代效果。並且，它們有各自的應用情境，可以根據需要選擇使用。
方法一：使用IE = EmulateIE9屬性，指示瀏覽器採用IE9渲染模式：
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">因為IE9是支援條件注釋的，在頁面的頭部加入以上的中繼資料後，IE10/11就使用IE9的渲染模式，自然就能識別條件注釋了。
很顯然，這樣做的弊端是，瀏覽器使用的是IE9的渲染模式，而不是最新的IE10/11的渲染模式。
方法二：使用媒體查詢語句的 +-ms-high-contrast 屬性，為不同瀏覽器應用不同的樣式。
CSS 的媒體查詢語句是一種進階的CSS條件陳述式，它能根據一些屬性和屬性值的計算結果，來判斷CSS是否可以生效。
由於只有IE10/11實現了 -ms-high-contrast 屬性，取值為active或none。因此，就可以使用以下媒體查詢語句：
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */ }Firefox瀏覽器、Chrome瀏覽器不能識別這個屬性，這個語句中的CSS就不會生效，便間接實現了條件注釋的效果。
方法三：使用Javascript判斷瀏覽器的類型，來為不同瀏覽器定義不同的樣式。
先用Javascript 判斷瀏覽器的類型，如果是IE瀏覽器，就在頁面的 <html> 標籤上添加一個 ie 的類名：
<script> var ms_ie = false; var ua = window.navigator.userAgent; var old_ie = ua.indexOf("MSIE");Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
