Web前端技術研究：Css hack技術---令人沮喪的技術 - sharpxiajun－IT工程師數位筆記本

文章出處

　　我最近想好好整理下csshack技術，但是結果很沮喪，下面我將我最初寫的筆記和大家分享下。

　　我在單位整理的研究筆記：

　　不同的瀏覽器對某些CSS代碼解析會存在一定的差異，因此就會導致不同瀏覽器下給用戶展示的頁面效果不一樣，碰到這樣的情況就需要開發人員通過針對不同的瀏覽器對應寫出不同的CSS代碼，從而達到兼容不同瀏覽器的目的，不會讓頁面因為瀏覽器的不同而產生有差異的顯示，這種技術有個專門的名稱就是CSS Hack。

　　在中國，這種差異主要是體現在主流瀏覽器上，我們只要解決了主流瀏覽器之間的CSS差異就可以了。目前流行的主流瀏覽器有Internet Explorer,Google Chrome,FireFox,Apple Safair以及Opera,在本文里對應簡稱為IE（后面如果添加數字，數字代表版本號，例如IE8），CH,FF,SA和OP。

　　CSS Hack原理是通過不同瀏覽器自身所帶有的特別標識符以及CSS中優先級的機制來實現不同瀏覽器里CSS樣式兼容性的問題。

　　CSS Hack有三種實現方式，它們分別是：CSS類內部的Hack、CSS選擇器的Hack和HTML頭部的Hack。

　　CSS類內部的Hack：是指CSS屬性或屬性值里加上只有某個瀏覽器自己可以識別的特殊字符串。例如IE6和IE7都會識別在CSS里屬性名稱前加上“*”號的屬性，但是firefox卻無法識別帶“*”號的屬性，因此下面的代碼：

body{
background:green; /* firefox下的顯示 */
*background:red; /* IE6和IE7下的顯示 */
}

　　CSS選擇器的Hack：它是指在CSS選擇器前面加上只有某種瀏覽器自己可以識別的特殊字符串。例如：IE6能識別*html .class{}，IE7能識別*+html .class{}。

　　HTML頭部的Hack：這種方式主要是針對IE瀏覽器，IE瀏覽器是廣大Web前端工程師的痛，它不僅有很多自己獨有的區別于其他瀏覽器的CSS樣式，自己不同版本之間的CSS實現也會存在很大的差異。下面我們來看看這種方式的寫法：

<!--[if lte IE 8]> <!-- IE條件注釋--> 
<link src="iecss.css" rel="stylesheet" /> 
<![endif]-->

　　這種寫法會被非IE的瀏覽器所忽略，只有IE瀏覽器才會執行上面的代碼，上面這段代碼的意思是當IE的版本是8或者比8低的IE瀏覽器才會執行下面的樣式。例子中有一個運算符號lte，它是less than or equal to的簡寫，意思是小于等于，其他的運算符號還有lt（less than，小于）、gte（greater than or equal to，大于等于）、gt（greater than，大于）。

　　下面我們來看一段代碼：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS hack技術</title>
</head>
<style type="text/css">
div{
    width:400px;
    height:120px;
    margin-bottom:20px;
    border-style:solid;
    border-width:1px;    
}
div.d01{
    background:red;/* FF */
    background:blue\0;/* OP */
    background:turquoise\9;/* IE8+ */
    [background:red;background:black;/* SA,CH */ 
    *background:green; /* IE7 */
    _background:yellow;/* IE6 */
}
</style>
<body>
<div class="d01"></div>
</body>
</html>

　　運行這個頁面，firefox顯示的顏色是red，opera為blue，ie6為yellow，ie7為green，ie8以上的版本是turquoise，chrome和safari為blcak。這個CSS Hack是我平時常用的一套模式。這里要說明下，ie8以上包括ie8的CSS樣式差異性較少，而chrome和safari之間的CSS樣式差異較小，因此這里我并沒有為它們單獨進行hack。

　　如果我們把上面代碼里的div.d01的內容順序調整下，例如下面這樣：

    background:blue\0;/* OP */
    background:turquoise\9;/* IE8+ */
    [background:red;background:black;/* SA,CH */ 
    *background:green; /* IE7 */
    _background:yellow;/* IE6 */
    background:red;/* FF */

　　我們會發現不同瀏覽器顯示的效果就會發生變化。ie8以上的版本以及opera顯示正常，但是chrome，safari，ie6，ie7顯示的是紅色，而firefox則沒有任何顏色。引起這個問題的原因是CSS優先級的問題，例如background:turquoise\9;這種寫法不會導致高版本的ie在顯示上產生偏差，是因為高版本的ie會優先使用這個樣式，對于同級別的CSS樣式，最后面的樣式會覆蓋前面的樣式，例如我們在ie6和ie7下看到的情況，此外，如果正確的樣式前面的樣式寫法導致瀏覽器無法正常解析，那么就會導致整個CSS樣式加載的失敗，例如firefox。

　　因此編寫CSS Hack時候，對于屬性排列的順序是特別注意的。

　　CSS Hack是一個總結性和經驗性很強的技術，它不像很多編程技術那樣需要我們去反復理解一些邏輯上的關系，而是需要我們平時多留心，多實踐。接下來我將會列舉不同瀏覽器之間的CSS Hack技術，大家可以根據自己實際的情況選擇應用。

　　對于ie，我們這邊主要考慮ie6，ie7，ie8，ie9，這四種版本的ie是目前中國市場上最流行的ie版本，雖然ie10已經出來，但是ie10現在使用的用戶相對較少，這邊不會作為重點講解。

　　對于CSS類內部的Hack ，ie6有自己專有的判斷標識“_”,其他的瀏覽器都不會識別”_”,ie6也支持”*”，但是“*”也被ie7識別，因此當我們只想區別ie6和ie7的時候，可以按下面的代碼書寫：

div.d02{
    *background:green; /* IE7 */
    _background:yellow;/* IE6 */
}

　　上面的寫法既可以區分ie6和ie7，但是如果我們顛倒其位置，那么不管是ie6還是ie7都會顯示green顏色。”*”和“_”是ie6和ie7專屬的，其他版本的瀏覽器都不支持該標記。

　　ie6和ie7除了上面兩個專屬標記，IE6還能識別能識別*html selector{}，IE7還能能識別*+html . selector {}，大家看下面這段代碼：

*html div.d03{
    background:yellow;/* IE6 */
}
*+html div.d03{
    background:green;/* IE7 */
}

　　這兩種寫法是等價的。IE6的*html selector {}和IE7的*+html . selector {}也都是專有標記，別的瀏覽器都不會識別的。

　　還有個很有趣的標記，就是!important，在網上很多資料說該標記IE6不支持，IE7和firefox支持，為了驗證網上說法本人寫了下面的樣式：

div.d04{
    background:red !important;    
}

　　我使用的瀏覽器配置如下：

　　支持IE7，IE8，IE9；IE6通過ietester實現；firefox版本是23.0.1；chrome的版本是27.0.1453.116 m；opera的版本是12.12，運行上面的樣式實際的效果是：

　　IE6，IE7，chrome，safari顯示為紅色，而其他瀏覽器都沒有顯示任何顏色。

　　這樣說明隨著瀏覽器的不斷升級，csshack技術也是發生變化的，在使用一些現成的css hack代碼時候，如果當不到預期效果是很正常，這時就需要我們細心的測試，找出最好的解決方案。

　　以上的文字都是我在單位電腦上進行開發寫出來，我家里的筆記本重裝了操作系統，所有的瀏覽器都進行了重裝，現在都是最新的版本，當我把下面的代碼再執行下時候：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS hack技術</title>
</head>
<style type="text/css">
div{
    width:400px;
    height:120px;
    margin-bottom:20px;
    border-style:solid;
    border-width:1px;    
}
div.d01{
    background:red;/* FF */
    background:blue\0;/* OP */
    background:turquoise\9;/* IE8+ */
    [background:red;background:black;/* SA,CH */ 
    *background:green; /* IE7 */
    _background:yellow;/* IE6 */
}
</style>
<body>
<div class="d01"></div>
</body>
</html>