CSS hack 介紹及速查對照表
發(fā)布時間：2011-09-05 22:49:20 作者：佚名 
我要評論
我要評論學(xué)習(xí)CSS，除了基礎(chǔ)，還有必學(xué)的一課，就是CSS hack，很多書籍上都有涉及。當(dāng)時覺得這個東西很神秘，可以針對某個或某些瀏覽器寫些特別的 CSS 樣式而不影響其他，而且用起來也很方便。
雖然如此，但是，很少有人知道，它到底是什么東西，使用CSS hack好不好，以及它是怎樣實現(xiàn)的？
下面，就談一下我對CSS hack的認(rèn)識。希望能幫助大家正確的認(rèn)識CSS hack。
介紹之前，請先記住一句話：你今天用CSS hack解決兼容性問題，明天瀏覽器就可能讓你那解決問題的CSS hack變成另一個兼容性問題。
CSS hack簡介
這，還要從W3C CSS2.1的標(biāo)準(zhǔn)說起。
W3C CSS2.1的標(biāo)準(zhǔn)的第四章，講了CSS的基本語法，數(shù)據(jù)，以及值，還講到了如何去處理不合理的值及聲明等?？梢詤⒖嘉曳窒淼牧硗鈨蓚€帖子：【分享】說說標(biāo)準(zhǔn) --CSS標(biāo)準(zhǔn)中的值，【分享】說說標(biāo)準(zhǔn)--我 的眼里只有你--CSS的錯誤解析規(guī)則。
W3C CSS2.1 標(biāo)準(zhǔn)也規(guī)定了瀏覽器應(yīng)當(dāng)支持的特性屬性或值。
雖然如此，W3C也不可能強制瀏覽器廠商必須遵循標(biāo)準(zhǔn)。因此就出現(xiàn)了各大廠商對標(biāo)準(zhǔn)的實現(xiàn)不盡相同的現(xiàn)象。由于不同的瀏覽器，比如IE6、 IE7、 IE8、 Firefox等，對CSS解析的標(biāo)準(zhǔn)不同，因此對于相同的 CSS代碼，可能會生成不同的頁面效果，從而無法在所有瀏覽器中得到我們想要的效果。這時，我們就需要針對不同的瀏覽器去寫不同的CSS代碼，讓它能夠在所有瀏覽器中獲得相同的效果。這個過程，就是CSS hack。也就是寫出只有個別瀏覽器或某些瀏覽器識別的CSS代碼。
CSS hack是因為現(xiàn)有瀏覽器對標(biāo)準(zhǔn)的解析不同，為了兼容各瀏覽器，所采用的一種補救方法。
CSS hack是一種類似作弊的手段，以欺騙瀏覽器的方式達到兼容的目的，是用瀏覽器的兼容性差異來解決瀏覽器的兼容性問題。
因此，在設(shè)計之初，寫CSS hack需要遵循以下三條原則：
⃟有效： 能夠通過 Web 標(biāo)準(zhǔn)的驗證
⃟只針對太古老的/不再開發(fā)的/已被拋棄的瀏覽器， 而不是目前的主流瀏覽器
⃟代碼要丑陋。讓人記住這是一個不得已而為之的 Hack, 時刻記住要想辦法去掉它。
現(xiàn)在很多hacks已經(jīng)拋棄了最初的原則，而濫用hack會導(dǎo)致瀏覽器更新之后產(chǎn)生更多的兼容性問題。
因此，并不推薦使用CSS hack來解決兼容性問題。
CSS hack的實現(xiàn)方式
我總結(jié)了一下，實現(xiàn)CSS hack大概有以下幾種方式：
1. 利用瀏覽器對相同代碼的解析和支持的不同實現(xiàn)的hack
不同瀏覽器對相同的CSS代碼的支持情況可能不同。尤其是對錯誤的寫法。
例如，
CSS code
#test{
_width:80px;
}
在IE7及以上版本的瀏覽器中會被當(dāng)作錯誤特性而舍棄，但是在IE6中可以被正常的解析。這時候，可以把_width當(dāng)作hack，專門針對 IE6來設(shè)置元素的寬度。
2. 以Firefox或Webkit特有的擴展樣式實現(xiàn)的hack
以-moz或-webkit開頭的擴展樣式，是瀏覽器對CSS標(biāo)準(zhǔn)的擴展。這些特性只在相應(yīng)的瀏覽器里才可以被正常的解析。 因此可以被當(dāng)作CSS hack來使用。
以-moz開頭的Firefox特有擴展樣式
Mozilla瀏覽器支持的一些擴展是以-moz開頭的。這些擴展包括了一些功能，例如圓形邊界等。這種CSS只適用于Mozilla瀏覽器。
比如，-moz-opacity是在Firefox2.0版本出現(xiàn)的特性，用來實現(xiàn)元素的透明，但Firefox3.0以后的版本中不再支持，而是直接支持標(biāo)準(zhǔn)中的opacity特性。而其他瀏覽器不支持-moz-opacity。所以，可以使用-moz-opacity來針對Firefox2.0設(shè)置元素的透明度。
關(guān)于Firefox擴展樣式的詳細信息，見Mozilla CSS Extensions。
以-webkit開頭的Webkit瀏覽器特有擴展樣式
與以-moz開頭的Firefox特有擴展樣式相同，以-webkit開頭的樣式是 Webkit瀏覽器特有的，只有Webkit瀏覽器可以解析。
比如，在Webkit瀏覽器中可以用 -webkit-border-radius實現(xiàn)圓角。
3. 利用IE對標(biāo)準(zhǔn)的支持缺陷寫的CSS hack
這個類別以中的hack以IE對標(biāo)準(zhǔn)的支持缺陷為基礎(chǔ)，可以讓CSS代碼針對IE6或IE7以外的瀏覽器生效。
例如，!important只有IE7及以上版本的IE及其他瀏覽器支持，所以，可以用!important來針對IE6以外的瀏覽器寫 CSS代碼；再如，head:first-child+body selector，:first-child不被IE6支持，所以可以用來針對IE6以外的瀏覽器編寫CSS代碼。
此處不在一一列舉。
當(dāng)然，有的觀點認(rèn)為應(yīng)用CSS2.1標(biāo)準(zhǔn)，不屬于CSS hack。見Tantek's Thoughts，Using A CSS2 Feature Is NOT a Hack。
4. 以IE特有的條件注釋為基礎(chǔ)的hack
IE瀏覽器中特有的條件注釋也經(jīng)常被用作 hack，可以針對特定版本的IE寫CSS代碼。
例如，測試用例：
HTML code
<!--[if IE 8]>
<style type="text/css">
#test {
color: red;
}
</style>
<![endif]-->
<h1 id="test">TEXT</h1>
以上代碼中的 "TEXT"，只在IE8中才會是紅色。
CSS hack匯總表
Windows系統(tǒng)下各瀏覽器常用CSS hack匯總表，如下：
說明：
1. 此匯總表中測試瀏覽器的版本為
o IE6
o IE7
o IE8
o Firefox 3.6.6
o Safari 5.0
o Chrome 6.0.458.1 dev
o Opera 10.60
2. 其中，多數(shù)CSS hack是在selector{property:value;}基礎(chǔ)上更改的。selector代表CSS選擇器，property代表CSS特性，value代表特性的值。
3. FF代表Firefox，Ch代表Chorme，Sa代表Safari，Op代表Opera
4. Q代表Quirks Mode，S代表Standards Mode。
5. Hack Type列的數(shù)字，指的是上面CSS hack的實現(xiàn)方式中的列表號。1是指“利用瀏覽器對相同代碼的解析和支持的不同實現(xiàn)的hack”，2是指以Firefox或Webkit特有的擴展樣式實現(xiàn)的hack。
其中 *+html selector 的測試用例：
HTML code
<style type="text/css">
*+html #test {
color: red;
}
</style>
<h1 id="test">TEXT</h1>
其他測試用例可在此基礎(chǔ)上修改。
切記，遵守CSS hack的三條原則。CSS hack是沒有辦法的時候才使用的解決兼容性問題的招術(shù)，是用兼容性問題去解決兼容性問題，無異于飲鴆止渴。切莫一有兼容性問題就使用。
另外，時刻記得改掉用CSS hack修補的問題。
補充一點兒好玩兒的東西，Yahoo也有一種實現(xiàn)hack的方式，比較特殊。Yahoo會利用服務(wù)器去判斷打開其頁面的瀏覽器的類別，然后，把信息加到HTML標(biāo)簽上，比如我使用Firefox打開Yahoo的首頁，查看它的HTML標(biāo)簽，發(fā)現(xiàn)：
HTML code
<html lang="en-US" class="y-fp-bg y-fp-pg-grad ua-ff ua-win ua-ff3_6 bkt701">……</html>
注意其中的ua-ff ua-win ua-ff3_6，含有瀏覽器類別和版本的信息。
然后，在設(shè)置特定瀏覽器的樣式時，比如，我希望在Firefox里讓所有的div中的文字都是紅色，可以這樣設(shè)置：
CSS code
.ua-ff div{
color : red;
}
最后再附兩條：
清除浮動
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，當(dāng)子級都為浮動時，那么父級的高度就無法完全的包住整個子級，那么這時用這個清除浮動的HACK來對父級做一次定義，那么就可以解決這個問題。
截字省略號
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
這個是在越出長度后會自行的截掉多出部分的文字，并以省略號結(jié)尾，很好的一個技術(shù)。只是目前Firefox并不支持。
下面，就談一下我對CSS hack的認(rèn)識。希望能幫助大家正確的認(rèn)識CSS hack。
介紹之前，請先記住一句話：你今天用CSS hack解決兼容性問題，明天瀏覽器就可能讓你那解決問題的CSS hack變成另一個兼容性問題。
CSS hack簡介
這，還要從W3C CSS2.1的標(biāo)準(zhǔn)說起。
W3C CSS2.1的標(biāo)準(zhǔn)的第四章，講了CSS的基本語法，數(shù)據(jù)，以及值，還講到了如何去處理不合理的值及聲明等?？梢詤⒖嘉曳窒淼牧硗鈨蓚€帖子：【分享】說說標(biāo)準(zhǔn) --CSS標(biāo)準(zhǔn)中的值，【分享】說說標(biāo)準(zhǔn)--我 的眼里只有你--CSS的錯誤解析規(guī)則。
W3C CSS2.1 標(biāo)準(zhǔn)也規(guī)定了瀏覽器應(yīng)當(dāng)支持的特性屬性或值。
雖然如此，W3C也不可能強制瀏覽器廠商必須遵循標(biāo)準(zhǔn)。因此就出現(xiàn)了各大廠商對標(biāo)準(zhǔn)的實現(xiàn)不盡相同的現(xiàn)象。由于不同的瀏覽器，比如IE6、 IE7、 IE8、 Firefox等，對CSS解析的標(biāo)準(zhǔn)不同，因此對于相同的 CSS代碼，可能會生成不同的頁面效果，從而無法在所有瀏覽器中得到我們想要的效果。這時，我們就需要針對不同的瀏覽器去寫不同的CSS代碼，讓它能夠在所有瀏覽器中獲得相同的效果。這個過程，就是CSS hack。也就是寫出只有個別瀏覽器或某些瀏覽器識別的CSS代碼。
CSS hack是因為現(xiàn)有瀏覽器對標(biāo)準(zhǔn)的解析不同，為了兼容各瀏覽器，所采用的一種補救方法。
CSS hack是一種類似作弊的手段，以欺騙瀏覽器的方式達到兼容的目的，是用瀏覽器的兼容性差異來解決瀏覽器的兼容性問題。
因此，在設(shè)計之初，寫CSS hack需要遵循以下三條原則：
⃟有效： 能夠通過 Web 標(biāo)準(zhǔn)的驗證
⃟只針對太古老的/不再開發(fā)的/已被拋棄的瀏覽器， 而不是目前的主流瀏覽器
⃟代碼要丑陋。讓人記住這是一個不得已而為之的 Hack, 時刻記住要想辦法去掉它。
現(xiàn)在很多hacks已經(jīng)拋棄了最初的原則，而濫用hack會導(dǎo)致瀏覽器更新之后產(chǎn)生更多的兼容性問題。
因此，并不推薦使用CSS hack來解決兼容性問題。
CSS hack的實現(xiàn)方式
我總結(jié)了一下，實現(xiàn)CSS hack大概有以下幾種方式：
1. 利用瀏覽器對相同代碼的解析和支持的不同實現(xiàn)的hack
不同瀏覽器對相同的CSS代碼的支持情況可能不同。尤其是對錯誤的寫法。
例如，
CSS code
復(fù)制代碼
代碼如下:#test{
_width:80px;
}
在IE7及以上版本的瀏覽器中會被當(dāng)作錯誤特性而舍棄，但是在IE6中可以被正常的解析。這時候，可以把_width當(dāng)作hack，專門針對 IE6來設(shè)置元素的寬度。
2. 以Firefox或Webkit特有的擴展樣式實現(xiàn)的hack
以-moz或-webkit開頭的擴展樣式，是瀏覽器對CSS標(biāo)準(zhǔn)的擴展。這些特性只在相應(yīng)的瀏覽器里才可以被正常的解析。 因此可以被當(dāng)作CSS hack來使用。
以-moz開頭的Firefox特有擴展樣式
Mozilla瀏覽器支持的一些擴展是以-moz開頭的。這些擴展包括了一些功能，例如圓形邊界等。這種CSS只適用于Mozilla瀏覽器。
比如，-moz-opacity是在Firefox2.0版本出現(xiàn)的特性，用來實現(xiàn)元素的透明，但Firefox3.0以后的版本中不再支持，而是直接支持標(biāo)準(zhǔn)中的opacity特性。而其他瀏覽器不支持-moz-opacity。所以，可以使用-moz-opacity來針對Firefox2.0設(shè)置元素的透明度。
關(guān)于Firefox擴展樣式的詳細信息，見Mozilla CSS Extensions。
以-webkit開頭的Webkit瀏覽器特有擴展樣式
與以-moz開頭的Firefox特有擴展樣式相同，以-webkit開頭的樣式是 Webkit瀏覽器特有的，只有Webkit瀏覽器可以解析。
比如，在Webkit瀏覽器中可以用 -webkit-border-radius實現(xiàn)圓角。
3. 利用IE對標(biāo)準(zhǔn)的支持缺陷寫的CSS hack
這個類別以中的hack以IE對標(biāo)準(zhǔn)的支持缺陷為基礎(chǔ)，可以讓CSS代碼針對IE6或IE7以外的瀏覽器生效。
例如，!important只有IE7及以上版本的IE及其他瀏覽器支持，所以，可以用!important來針對IE6以外的瀏覽器寫 CSS代碼；再如，head:first-child+body selector，:first-child不被IE6支持，所以可以用來針對IE6以外的瀏覽器編寫CSS代碼。
此處不在一一列舉。
當(dāng)然，有的觀點認(rèn)為應(yīng)用CSS2.1標(biāo)準(zhǔn)，不屬于CSS hack。見Tantek's Thoughts，Using A CSS2 Feature Is NOT a Hack。
4. 以IE特有的條件注釋為基礎(chǔ)的hack
IE瀏覽器中特有的條件注釋也經(jīng)常被用作 hack，可以針對特定版本的IE寫CSS代碼。
例如，測試用例：
HTML code
復(fù)制代碼
代碼如下:<!--[if IE 8]>
<style type="text/css">
#test {
color: red;
}
</style>
<![endif]-->
<h1 id="test">TEXT</h1>
以上代碼中的 "TEXT"，只在IE8中才會是紅色。
CSS hack匯總表
Windows系統(tǒng)下各瀏覽器常用CSS hack匯總表，如下：
說明：
1. 此匯總表中測試瀏覽器的版本為
o IE6
o IE7
o IE8
o Firefox 3.6.6
o Safari 5.0
o Chrome 6.0.458.1 dev
o Opera 10.60
2. 其中，多數(shù)CSS hack是在selector{property:value;}基礎(chǔ)上更改的。selector代表CSS選擇器，property代表CSS特性，value代表特性的值。
3. FF代表Firefox，Ch代表Chorme，Sa代表Safari，Op代表Opera
4. Q代表Quirks Mode，S代表Standards Mode。
5. Hack Type列的數(shù)字，指的是上面CSS hack的實現(xiàn)方式中的列表號。1是指“利用瀏覽器對相同代碼的解析和支持的不同實現(xiàn)的hack”，2是指以Firefox或Webkit特有的擴展樣式實現(xiàn)的hack。
其中 *+html selector 的測試用例：
HTML code
復(fù)制代碼
代碼如下:<style type="text/css">
*+html #test {
color: red;
}
</style>
<h1 id="test">TEXT</h1>
其他測試用例可在此基礎(chǔ)上修改。
切記，遵守CSS hack的三條原則。CSS hack是沒有辦法的時候才使用的解決兼容性問題的招術(shù)，是用兼容性問題去解決兼容性問題，無異于飲鴆止渴。切莫一有兼容性問題就使用。
另外，時刻記得改掉用CSS hack修補的問題。
補充一點兒好玩兒的東西，Yahoo也有一種實現(xiàn)hack的方式，比較特殊。Yahoo會利用服務(wù)器去判斷打開其頁面的瀏覽器的類別，然后，把信息加到HTML標(biāo)簽上，比如我使用Firefox打開Yahoo的首頁，查看它的HTML標(biāo)簽，發(fā)現(xiàn)：
HTML code
<html lang="en-US" class="y-fp-bg y-fp-pg-grad ua-ff ua-win ua-ff3_6 bkt701">……</html>
注意其中的ua-ff ua-win ua-ff3_6，含有瀏覽器類別和版本的信息。
然后，在設(shè)置特定瀏覽器的樣式時，比如，我希望在Firefox里讓所有的div中的文字都是紅色，可以這樣設(shè)置：
CSS code
復(fù)制代碼
代碼如下:.ua-ff div{
color : red;
}
最后再附兩條：
清除浮動
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，當(dāng)子級都為浮動時，那么父級的高度就無法完全的包住整個子級，那么這時用這個清除浮動的HACK來對父級做一次定義，那么就可以解決這個問題。
截字省略號
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
這個是在越出長度后會自行的截掉多出部分的文字，并以省略號結(jié)尾，很好的一個技術(shù)。只是目前Firefox并不支持。
相關(guān)文章
這篇文章主要介紹了淺談原生頁面兼容IE9問題的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2020-12-16新版chrome瀏覽器設(shè)置允許跨域的實現(xiàn)
這篇文章主要介紹了新版chrome瀏覽器設(shè)置允許跨域的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2020-11-30css hack之\9和\0就可能對hack IE11\IE9\IE8無效
每次設(shè)計一張網(wǎng)頁或一個表單，都被各種瀏覽器的兼容問題傷透腦筋，尤其是IE家族。在做兼容性設(shè)計時，我們往往會使用各種瀏覽器能識別的獨特語法進行hack，從而達到各種瀏覽2020-03-20css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼
這篇文章主要介紹了css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼,需要的朋友可以參考下2020-03-20
這篇文章主要介紹了解決CSS瀏覽器兼容性問題的4種方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)2020-02-28
這篇文章主要介紹了常見的瀏覽器兼容性問題(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2020-02-20
這篇文章主要介紹了border-radius IE8兼容處理的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)2020-02-12- 這篇文章主要介紹了淺談遇到的幾個瀏覽器兼容性問題，詳細的介紹了幾種我遇到的問題和解決方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-26
這篇文章主要介紹了base64圖片在各種瀏覽器的兼容性處理的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-14
這篇文章主要介紹了對常見的css屬性進行瀏覽器兼容性總結(jié)(推薦)的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-20
