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