當需要針對不同的瀏覽器編寫不同的CSS樣式時的要點

為網頁應用CSS，我們都知道有四種方法：行內式、嵌入式、import載入式、link載入式。

方法很多，但如果你想做點像樣的東西，基本上前三種都可以不予考慮了：

行內式：直接寫到每個元素的style屬性裡。極其繁瑣、災難性質、無法維護。

嵌入式：直接寫到HTML頁面的style元素裡。難以維護。

import載入式：在HTML頁面的style元素裡以@import"這裡寫CSS檔案的路徑"的方式來載入外部的CSS。缺點是CSS會在HTML頁面載入之後才被載入，這會導致有那麼一會兒你的HTML頁面的樣子是七零八落的。

link載入式：在HTML頁面的head元素中以的方式來載入外部的CSS檔案。優點是CSS檔案會先於HTML頁面被載入進來，因此，任何時候你的頁面都是美觀的。

在實際開發時，你會發現，IE的噩夢即使到了IE11也是存在的，一些在Chrome和Firefox下完全正常和無害的頁面在IE11下卻有一些問題，通常也不是什麼大問題，但多數都會明顯到你感到不得不處理一下。

你可以使用原生JavaScript或jQuery來根據捕獲到的客戶端瀏覽器的資訊來決定載入哪個CSS檔案。

在針對不同的瀏覽器編寫不同的外部CSS檔案時，有兩點要注意：

1. 外部CSS檔案的開頭一定不要寫元素。換句話說，你的外部CSS檔案中應該沒有任何HTML元素，只有純粹的CSS樣式。如果你寫上了元素，你會遇到一些奇怪的問題。

2. 因為你實際上要糾正的只是不同瀏覽器中個別的那幾處小問題，針對不同的瀏覽器的CSS檔案之間的差別是很小的，如果為了這點差別，就要維護幾份內容幾乎相同的CSS檔案是很不值得的，因為你將不得不費力的在多份CSS檔案中比對著那份已經除錯好的CSS檔案在其他幾份CSS檔案中尋找你該改哪些地方，不該動哪些地方，當CSS檔案內容很多時，你會發現這工作相當要命。

因此，正確的做法是你應該寫一份通用的CSS檔案（比如一份針對Chrome的CSS檔案，假定叫a.css），然後將針對IE的那幾處修訂樣式單獨寫到一個CSS檔案中（假定叫b.css），並在動態載入時，針對Chrome只載入a.css檔案，而針對IE則使用link進行兩次載入，第一次載入通用的a.css檔案，第二次載入b.css。沒錯，在一個HTML頁面中是可以載入多個CSS檔案的，而且後載入的CSS會覆蓋先前載入的CSS對同一目標的樣式指定。

這樣有一個巨大的好處，那就是你只需要維護一份主CSS即可。當又發現兩個瀏覽器中有什麼不同時，只需把用於修訂的小塊CSS程式碼新增到對應的修訂CSS檔案中即可。