本文由 Kayo Lee 發表，本文鏈接：http://kayosite.com/the-methods-make-css-only-for-ie.html
因為萬惡的 IE 存在各種的不標準，因此，在進行頁面開發時不免要為 IE 單獨寫一些 CSS 。熟悉的方法有 IE hacks 和條件注釋 CSS（Conditional Stylesheets），下面，不妨討論一下這兩種方法的優缺點。
IE hacks
舉個例子，一個元素在其他瀏覽中的左邊距是 30px ，而在 IE6 中則設置為 20px ，可以如下編寫：
|
1
|
.demo {margin-left: 30px; _margin-left: 20px; } |
對我個人而言，喜歡條件注釋 CSS 是勝于 IE hacks ，光是 IE hacks 里面帶有“hacks”這個單詞已經讓人很不舒服，總覺得這是偏方，而且是很偏的解決方案。但是，IE hacks 也有它的優點——
- CSS hacks 內嵌在普通的 CSS 里面，不會產生更多 HTTP 請求。
- CSS hacks 內嵌在普通的 CSS 里面，編寫時比較方便。
當然，它的缺點也很明顯——
- 它是不標準的產物。
- 內嵌在其他 CSS 中，不便維護。尤其是當 hacks 的數量比較多的時候維護簡直是個惡夢。
- 內嵌在其他 CSS 中，即使在非 IE 瀏覽器中也會被加載，浪費資源。
條件注釋 CSS
同樣是上面的例子，如果使用條件注釋 CSS ，可以如下編寫：
HTML
|
1
2
3
|
<!--[if IE 6 ]> <link rel="stylesheet" type="text/css" media="all" href="./ie6.css" /><![endif]--> |
ie6.css
|
1
|
.demo {margin-left: 20px; } |
這里說明一下：條件注釋是一種 IE 專有的、對常規（X）HTML 注釋的 Miscrosoft 擴展。從 W3C 標準來說，它也是不標準的產物，但它是微軟官方推出的針對 IE 進行開發的方式，并且條件注釋對于其他所有瀏覽器作為常規注釋出現，因此對其他瀏覽器無害。
條件注釋 CSS 的好處是在獨立的 CSS 文件中編寫，能準確控制在特定的 IE 中加載，不會造成資源浪費，并且便于維護。缺點就是會產生多余的 HTTP 請求，尤其是當你需要兼容的 IE 版本很多的時候，你就需要產生多個 HTTP 請求，這對于本來通道數目就少的低版本 IE 來說無疑會影響頁面加載速度。
條件注釋只能在IE5+的環境之下。
默認的CSS樣式應該位于HTML文檔的首行，進行條件注釋判斷的所有內容必須位于該默認樣式之后。
并且<!--與 -->的內容和注釋標記之間不能有任何的空格，否則會出錯，無法正確的讀取IE的CSS文件。
顯然，以上兩種方法都不是很好的方法，因此，接下來介紹一種相對來說更好的解決方案。
條件注釋 html 標簽
這種方案也是利用條件注釋，但并不是對 CSS 使用條件注釋，而是對 html 標簽使用條件注釋，引入不同的 class ，從而區分不同的 IE 以及其他瀏覽器。例如：
|
1
2
3
4
5
6
|
<!DOCTYPE html><!--[if IE 6 ]> <html class="ie6 lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]--><!--[if lte IE 6 ]> <html class="lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]--><!--[if lte IE 7 ]> <html class="lte_ie7 lte_ie8" lang="zh-CN"> <![endif]--><!--[if lte IE 8 ]> <html class="lte_ie8" lang="zh-CN"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="zh-CN"><!--<![endif]--> |
然后把針對特定 IE 的 CSS 加上相應的 class 并寫在普通 CSS 文件里即可。例如上面的例子則可以在 CSS 文件里編寫：
|
1
|
.ie6 .demo {margin-left: 20px; } |
這種方法吸收了條件注釋表達式的好處同時又不會產生多余的 HTTP 請求，只是由于這些針對特定 IE 的 CSS 與普通的 CSS 放在一起，即不是相應的 IE 也會被加載，因此如果 CSS 數目比較多的話就會像使用 hacks 那樣，造成浪費，開發者需要根據具體情況選擇方法。
浙公網安備 33010602011771號