【總結】瀏覽器CSS Hacks匯總
瀏覽器兼容可以說是前端開發所要面對的第一個挑戰，目前我的電腦上已經安裝了6種瀏覽器（基于IE內核的不算，如Maxthon等）。
CSS hacks利用瀏覽器的漏洞來隱藏特定瀏覽器的CSS規則。實現瀏覽器兼容主要有兩種方式條件樣式表和CSS Hacks（Selector Hacks、Attribute Hacks）。對此根據一些資料匯總了一些CSS Hacks方法。
文章的主要內容包括：
1.條件樣式表2.選擇器Hacks（Selecto
瀏覽器兼容可以說是前端開發所要面對的第一個挑戰，目前我的電腦上已經安裝了6種瀏覽器（基于IE內核的不算，如Maxthon等）。
CSS hacks利用瀏覽器的漏洞來隱藏特定瀏覽器的CSS規則。實現瀏覽器兼容主要有兩種方式條件樣式表和CSS Hacks（Selector Hacks、Attribute Hacks）。對此根據一些資料匯總了一些CSS Hacks方法。
1.條件樣式表
像這樣的代碼你應該見過:
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css"href="css/ie.css" />
< ![endif]-->
PS：yahoo的內部編碼最佳做法并不建議使用有條件的樣式表。它會增加額外的平均1或2個HTTP下載請求（參考這里）。
2.選擇器Hacks（Selector Hacks）
/* IE6 及以下 */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (IE 6,7以外) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 及以下, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* IE6-8以外 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
PS：選擇器Hacks方式比較多， 但只要代碼寫得夠標準, 其實要 Hack 的地方不會很多的, 除了有時候IE搗亂，IE 以外的瀏覽器幾乎都不會有問題。
3.屬性hacks（Attribute Hacks）
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* 或 #color: blue */ }
/* IE6以外 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* 僅IE8 */
#veinte { color: blue\0; }
PS：屬性Hacks混寫是我較多使用的一種方式，感覺寫起來比較簡單。CSS Hacks的使用大多情況下是為了兼顧一下愛搗亂的IE，使用Attribute Hacks基本上能解決對IE的兼容。
4.屬性hacks混寫
/* !important優先 */
#bgcolor {
background:red !important; /* Firefox 等其他瀏覽器 */
background:blue; /* IE6 */
}
#test {
background-color: black; /* Firefox, Opera, IE8 */
[;background-color: green;] /* Safari, Chrome */
*background-color: blue; /* IE7 */
_background-color: red; /* IE6 */
}
PS：屬性hacks混寫要注意書寫次序。
最后，看一下這個測試頁面吧（演示）
其實瀏覽器兼容不應該只對過去的瀏覽器兼容（向前兼容），更應該考慮為未來瀏覽器服務（向后兼容），所以開發時，要盡可能的符合標準，保持代碼整潔是一件很重要的事情（參考《Keep CSS Simple》）不得已的時候才Hack一下。
PS：本文由維奇總結，如有轉載請注明出處，謝謝！
參考資料
Browser CSS hacks：http://paulirish.com/2009/browser-specific-css-hacks/
CSS Hacks：http://www.webdevout.net/css-hacks
延伸閱讀
浙公網安備 33010602011771號