css hack原理

最近看了幾篇關於css hack的文章，覺得不錯整理一下。

css hack很多人不理解它的原理，其實大家都知道對於不同的瀏覽器，CSS的解析程度不一樣，因此會導致產生的頁面效果不一樣；特別是對於IE這種蛇精病的瀏覽器來說，這個時候我們就需要針對不同的瀏覽器（特別是IE）去寫不同的CSS，這個過程就叫做css hack.而不是那個hack，可以說css hack是一種藉助於不同瀏覽器之間規則標準的不同而實現相容性的一種“曲線救國”的策略，雖然如此，我們還是希望世界大同，有個統一的標準能夠統一瀏覽器規範 T T

css hack主要依據的是

1.瀏覽器對CSS的支援及解析結果不一樣；

2.CSS中的優先順序的關係。

常用的CSS hack 有三種方式，CSS 內部hack、選取器hack、HTML 頭部引用，其中第一種最常用。

A.css 內部hack:

CSS 內部hack 文法是這樣的 selector{?property:value?;} 比如IE6能識別底線"_"和星號"*"，IE7能識別星號"*"，但不能識別底線"_"，而firefox兩個都不能認識。對於書寫順序的關係，一般是將識別能力強的瀏覽器的CSS寫在後面。

<style> div{      background:green;/*forfirefox*/      *background:red;/*forIE6 IE7*/ }  </style>

這樣的話就成功對IE6,7 做了一次hack;

再比如，“!important”的寫法只有IE6不能識別，其它版本IE及現代瀏覽器都可以識別

其它版本IE及現代瀏覽器都可以識別，還有“+”、“\0”、”\9” 等，這裡盜圖一張：

B.選取器hack

選取器hanck主要是針對IE瀏覽器，其實並不怎麼常用

文法是這樣的： selector{ sRules }

再盜圖一張：

針對IE9的hack可以這麼寫

:root .test{    background-color:green;}

C.HTML頭部引用

HTML頭部引用就比較特殊了，類似於程式語句，只能使用在HTML檔案裡，而不能在CSS檔案中使用，並且只有在IE瀏覽器下才能執行，在其他瀏覽器下面會被當做注釋視而不見。

比如：

css.css樣式表 ?>

<link rel="stylesheet" type="text/<a href=" http:="" www.php1.cn="" category="" 72.html"="">css" href="http://www.php1.cn/"><!--?[if IE 7]--><!--? 如果IE瀏覽器版是7,調用ie7.<a href="http://www.php1.cn/category/72.html"-->css樣式表 ?><link rel="stylesheet" type="text/<a href=" http:="" www.php1.cn="" category="" 72.html"="">css" href="http://www.php1.cn/"><!--[endif]?--><!--?[if lte IE 6]--><!--? 如果IE瀏覽器版本小於等於6,調用ie.<a href="http://www.php1.cn/category/72.html"-->css樣式表 ?><link rel="stylesheet" type="text/<a href=" http:="" www.php1.cn="" category="" 72.html"="">css" href="http://www.php1.cn/"><!--[endif]?-->

註：
lte：就是Less than or equal to的簡寫，也就是小於或等於的意思。
lt ：就是Less than的簡寫，也就是小於的意思。
gte：就是Greater than or equal to的簡寫，也就是大於或等於的意思。
gt ：就是Greater than的簡寫，也就是大於的意思。
! ：就是不等於的意思，跟javascript裡的不等於判斷符相同。

關於各種主流瀏覽器hack的用法可以參考這篇文章（目測需要hack的IE比較多）：

http://www.w3cplus.com/css/browser-hacks.html

還有專門羅列hack情況的網站： http://browserhacks.com/

