CSS Hack的基本原理和實現方式
本文向大家簡單介紹一下CSS Hack的基本原理和實現方式，有人說CSS hack是一種類似作弊的手段，以欺騙瀏覽器的方式達到兼容的目的，是用瀏覽器的兼容性差異來解決瀏覽器的兼容性問題，CSS hack是因為現有瀏覽器對標準的解析不同，為了兼容各瀏覽器，所采用的一種補救方法。
CSS Hack的基本原理和實現方式
由于不同的瀏覽器，比如IE6、IE7、IE8、Firefox等，對CSS解析的標準不同，因此對于相同的CSS代碼，可能會生成不同的頁面效果，從而無法在所有瀏覽器中得到我們想要的效果。這時，我們就需要針對不同的瀏覽器去寫不同的CSS代碼，讓它能夠在所有瀏覽器中獲得相同的效果。這個過程，就是CSS hack。也就是寫出只有個別瀏覽器或某些瀏覽器識別的CSS代碼。
CSS Hack的基本原理
CSS hack是因為現有瀏覽器對標準的解析不同，為了兼容各瀏覽器，所采用的一種補救方法。
CSS hack是一種類似作弊的手段，以欺騙瀏覽器的方式達到兼容的目的，是用瀏覽器的兼容性差異來解決瀏覽器的兼容性問題。因此，在設計之初，寫CSS hack需要遵循以下三條原則：
◆有效：能夠通過Web標準的驗證
◆只針對太古老的/不再開發的/已被拋棄的瀏覽器，而不是目前的主流瀏覽器
◆代碼要丑陋。讓人記住這是一個不得已而為之的Hack,時刻記住要想辦法去掉它。
現在很多hacks已經拋棄了最初的原則，而濫用hack會導致瀏覽器更新之后產生更多的兼容性問題。因此，并不推薦使用CSS hack來解決兼容性問題。#p#
CSS hack的實現方式
我總結了一下，實現CSS hack大概有以下幾種方式：
1.利用瀏覽器對相同代碼的解析和支持的不同實現的hack
不同瀏覽器對相同的CSS代碼的支持情況可能不同。尤其是對錯誤的寫法。
例如
CSScode
- #test{
- _width:80px;
- }
在IE7及以上版本的瀏覽器中會被當作錯誤特性而舍棄，但是在IE6中可以被正常的解析。這時候，可以把_width當作hack，專門針對IE6來設置元素的寬度。
2.以Firefox或Webkit特有的擴展樣式實現的hack
以-moz或-webkit開頭的擴展樣式，是瀏覽器對CSS標準的擴展。這些特性只在相應的瀏覽器里才可以被正常的解析。因此可以被當作CSS hack來使用。
◆以-moz開頭的Firefox特有擴展樣式
Mozilla瀏覽器支持的一些擴展是以-moz開頭的。這些擴展包括了一些功能，例如圓形邊界等。這種CSS只適用于Mozilla瀏覽器。
比如，-moz-opacity是在Firefox2.0版本出現的特性，用來實現元素的透明，但Firefox3.0以后的版本中不再支持，而是直接支持標準中的opacity特性。而其他瀏覽器不支持-moz-opacity。所以，可以使用-moz-opacity來針對Firefox2.0設置元素的透明度。
關于Firefox擴展樣式的詳細信息，見MozillaCSSExtensions。
◆以-webkit開頭的Webkit瀏覽器特有擴展樣式
與以-moz開頭的Firefox特有擴展樣式相同，以-webkit開頭的樣式是Webkit瀏覽器特有的，只有Webkit瀏覽器可以解析。
比如，在Webkit瀏覽器中可以用-webkit-border-radius實現圓角。
3.利用IE對標準的支持缺陷寫的CSS hack
這個類別以中的hack以IE對標準的支持缺陷為基礎，可以讓CSS代碼針對IE6或IE7以外的瀏覽器生效。
例如，!important只有IE7及以上版本的IE及其他瀏覽器支持，所以，可以用!important來針對IE6以外的瀏覽器寫CSS代碼；再如，head:first-child+bodyselector，:first-child不被IE6支持，所以可以用來針對IE6以外的瀏覽器編寫CSS代碼。
此處不在一一列舉。
當然，有的觀點認為應用CSS2.1標準，不屬于CSS hack。見Tantek'sThoughts，UsingACSS2FeatureIsNOTaHack。
4.以IE特有的條件注釋為基礎的hack
IE瀏覽器中特有的條件注釋也經常被用作hack，可以針對特定版本的IE寫CSS代碼。
例如，測試用例：
- HTMLcode<!--[ifIE8]>
- <styletypestyletype="text/css">
- #test{
- color:red;
- }
- </style>
- <![endif]-->
- <h1idh1id="test">TEXT</h1>
以上代碼中的"TEXT"，只在IE8中才會是紅色。
【編輯推薦】
