對CSS HACK的一些看法

       那天瓜哥講了個問題，說說css HACK的一些看法，說說自己的想法，不對多指教。

        由於各種瀏覽器對css的解析存在差異，使同一頁面在各種瀏覽器下表現出來的效果也會不同。為瞭解決這個相容性問題，css hack技術產生了。
        個人認為css hack技術其實是一種欺騙瀏覽器的技術，通過在選取器、屬性等地方添加一些特別符號來使某些瀏覽器無法解析該選取器或屬性，以達到區分不同的瀏覽器的目的。其實個人覺得css hack是不安全的，有風險的，現在的瀏覽器更新很快，版本也出現了好幾個，誰也無法100%保證為這個版本瀏覽器所設定的css hack在下一個版本依然有效。比如在ie7還沒出來之前，!important一直作為區分ie和firefox的一個css hack。但ie7出來以後，隨著ie7對!important的支援，區分ie和firefox也就不能只用!important來實現了，這就可能導致以前在ie6時期製作並使用了!important hack的網頁在ie7下可能會出現差異。
        並不是說反對使用css hack技術，而是覺得對於一個存在風險的技術應該盡量少用，能不用盡量不要用。以前看過一些朋友的css代碼，大量使用了hack技術，而且沒有注釋，可以想象要理解這些代碼是多麼的痛苦。隨著瀏覽器的更新，css hack 沒給我們帶來問題那是好事，但一旦出現問題，維護起來又需要一定的成本，倘若遇到如上面所提到的css代碼，那才真的頭疼。那麼何時才用css hack呢？我覺得當你確定是瀏覽器對css的解析不符合規範，或者說是瀏覽器本身的bug引起，而不是由於你自身對css的理解不夠或者頁面結構錯誤一些細節問題而引起的表現差異，這才是css hack的用武之地，而不是一旦發現表現差異就立刻使用css hack，這樣寫出來的css代碼往往是缺乏規範的，也缺乏可讀性，到時候維護的成本也很大。

本文主要通過“.” ，“>”，“*”，“_”四種特殊符號，通過瀏覽器的支援的差異，實現CSS HACK，解決不同瀏覽器上CSS支援的問題，請看下錶：

屬性	IE6	IE7	IE8	FF2	FF3	Opera9.5
>property	Y	Y	Y	N	N	N
.property	Y	Y	Y	N	N	N
*property	Y	Y	Y	N	N	N
_property	Y	N	N	N	N	N

通過上表我們可以看到>、.、*在各瀏覽器中的表現是一致的，而_在IE6和IE7、IE8中有所區別。另外，IE6不支援!important的，而其他幾款瀏覽器都能夠識別。 

我們可以看一下樣本：

    區別IE6與FF： background:orange;*background:blue; 
    區別IE6與IE7：background:green !important;background:blue; 
    區別IE7與FF： background:orange; *background:green; 
    區別FF/IE7/IE6：background:orange;*background:green !important;*background:blue; 

    註：IE都能識別*標準瀏覽器(如FF)不能識別* 
    IE6能識別*，但不能識別 !important 
    IE7能識別*，也能識別!important 
    FF不能識別*，但能識別!important 
    IE6支援底線，IE7和firefox均不支援底線。
    於是大家還可以這樣來區分IE6、IE7、firefox : background:orange;*background:green;_background:blue; 

    通過CSS HACK，可以實現在不同的瀏覽器上實現相同的樣式，有效解決瀏覽器間的差異。