【總結】瀏覽器CSS Hacks匯總

　　瀏覽器兼容可以說是前端開發(fā)所要面對的第一個挑戰(zhàn)，目前我的電腦上已經(jīng)安裝了6種瀏覽器（基于IE內(nèi)核的不算，如Maxthon等）。

　　CSS hacks利用瀏覽器的漏洞來隱藏特定瀏覽器的CSS規(guī)則。實現(xiàn)瀏覽器兼容主要有兩種方式條件樣式表和CSS Hacks（Selector Hacks、Attribute Hacks）。對此根據(jù)一些資料匯總了一些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的內(nèi)部編碼最佳做法并不建議使用有條件的樣式表。它會增加額外的平均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優(yōu)先 */
#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混寫要注意書寫次序。

　　最后，看一下這個測試頁面吧（演示）

其實瀏覽器兼容不應該只對過去的瀏覽器兼容（向前兼容），更應該考慮為未來瀏覽器服務（向后兼容），所以開發(fā)時，要盡可能的符合標準，保持代碼整潔是一件很重要的事情（參考《Keep CSS Simple》）不得已的時候才Hack一下。 本文地址：http://www.cnblogs.com/wiky/archive/2010/01/07/Browser-CSS-Hacks-assembles.html PS：本文由維奇總結，如有轉載請注明出處，謝謝！ 參考資料 Browser CSS hacks：http://paulirish.com/2009/browser-specific-css-hacks/ CSS Hacks：http://www.webdevout.net/css-hacks 延伸閱讀 Will the browser apply the rule(s)? CSS Hackz Series: Targeting and Filtering Internet Explorer 7 CSS Hack 匯總快查 CSS hack:區(qū)分IE6，IE7，firefox

轉載于:https://www.cnblogs.com/liangxiaojie/p/4600498.html

總結

以上是生活随笔為你收集整理的转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。