css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼
我要評論網(wǎng)站兼容性調(diào)試實(shí)在令人煩心，現(xiàn)在的網(wǎng)站設(shè)計(jì)人員真的要比以前費(fèi)力很多，因?yàn)榫W(wǎng)頁代碼不再是只需滿足一個(gè)IE6訪問就行，而是要滿足N多的瀏覽器訪問正常才行。粗略算一下，目前至少要滿足如下的瀏覽器要求：IE8、IE9、IE10、IE11、Chrome、Firefox，由于360使用的是Chrome內(nèi)核，所以滿足Chrome基本就滿足了360。而IE家族真是一個(gè)版本一個(gè)樣，我說IE怎么這么喜歡折騰呢？這給網(wǎng)頁設(shè)計(jì)師帶來多大的麻煩呀！今天，我就把這幾個(gè)主要瀏覽器的CSS hack代碼匯總一下。
例如現(xiàn)有CSS代碼如下：
.divContent{
background-color:#eee;
}
那么下面我們就來寫一下，如何使代碼兼容幾個(gè)主流瀏覽器。
/* IE8+ */
.divContent{
background-color:#eee\0;
}
/* IE8、IE9 */
.divContent{
background-color:#eee\8\9\0;
}
/* IE9 */
.divContent{
background-color:#eee\9\0;
}
注意，\8\0的寫法是錯(cuò)誤的，不能試圖這樣hack IE8。上述代碼沒有對IE10和IE11分別hack（好像沒有對這兩個(gè)瀏覽器單獨(dú)hack的寫法），那么IE10和IE11使用的就是IE8+那個(gè)樣式。
IE家族hack完畢，下面看看如何hack Chrome和Firefox瀏覽器。
/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.divContent{
background-color:#eee;
}
}
/* Firefox */
@-moz-document url-prefix() {
.divContent{
background-color:#eee;
}
}
另外，還可以這樣hack其他瀏覽器
/* Chrome 和 opera */
@media all and (min-width:0){
.divContent{
background-color:#eee;
}
}
/* IE9+ */
@media all and (min-width:0) {
.divContent{
background-color:#eee;
}
}
/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.divContent{
background-color:#eee;
}
}
經(jīng)過這樣hack，網(wǎng)站瀏覽器兼容性問題就可以完美解決了。
在css中區(qū)別ie瀏覽器和chrome瀏覽器
/***** 樣式 Hack ******/
/* IE6 */ _color: blue; /* IE6, IE7 */ *color: blue; /* 或 #color: blue */ /* 除 IE6 外任何瀏覽器 */ color/**/: blue; /* IE6, IE7, IE8 */ color: blue\9; /* IE7, IE8 */ color/*\**/: blue\9; /* IE6, IE7 -- 作為 !important 使用 */ color: blue !ie; /* !后面的字串可以為任意字串 */
/***** 選擇器 Hack ******/
/* 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 / webkit 內(nèi)核移動端 */
@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 }
以上就是css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼的詳細(xì)內(nèi)容，更多關(guān)于css區(qū)分ie11 chrome firefox的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
CSS hacker使用小結(jié)(兼容IE6、7、8)
今天，結(jié)合自己的經(jīng)驗(yàn)和理解，做了幾個(gè)demo把IE6~IE8和其他標(biāo)準(zhǔn)瀏覽器的CSS hack做一個(gè)總結(jié)2016-09-11- 為了獲得統(tǒng)一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個(gè)針對不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過程，叫做CSS hack!2016-09-11
- 這篇文章主要介紹了各種瀏覽器下的CSS Hack兼容性寫法,CSS Hack大致可以分為內(nèi)部Hack和選擇器Hack以及HTML頭部引用Hack,需要的朋友可以參考下2016-03-14
- 本文匯總了一些CSS的瀏覽器兼容性的hack,都是非常常用的，作為一個(gè)前端設(shè)計(jì)師經(jīng)常能夠用到，這里推薦給大家。2014-11-24
IE6、IE7、IE8、Firefox兼容性CSS HACK代碼及示例
因?yàn)镮E6可以辨識「_」(底線)，但是Firefox卻不行，因此可以透過這樣的差異來區(qū)隔Firefox和IE6，有效達(dá)成CSS hack2013-10-25IE10 CSS Hack介紹及IE11的CSS Hack提前了解
一個(gè)頁面IE10下有問題，IE9下測試了一下，也有同樣的問題。悲劇了趕緊找IE10的hack，下面的方法還是比較實(shí)用的，感興趣的朋友可以參考下2013-09-16- ie9一出css hack也該更新，以前一直沒關(guān)注，今天在內(nèi)部參考群mxclion分享了IE9的css hack，拿出來也分享一下，需要的朋友可以學(xué)習(xí)下2013-09-16
- 大家在使用的過程中，需要注意書寫順序2012-11-10
- 學(xué)習(xí)CSS，除了基礎(chǔ)，還有必學(xué)的一課，就是CSS hack，很多書籍上都有涉及。當(dāng)時(shí)覺得這個(gè)東西很神秘，可以針對某個(gè)或某些瀏覽器寫些特別的 CSS 樣式而不影響其他，而且用起來2011-09-05
- ie5 hack, ie 6 hack, ie 8 hack,ie 9 我沒用，暫時(shí)也沒接觸過9的hack，隨著瀏覽器的更新（而且換代越來越快），是不是我有寫不完的hack，還是說高手從不寫hack。2011-07-22