欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼

  發(fā)布時(shí)間:2020-03-20 19:11:13   作者:佚名   我要評論
這篇文章主要介紹了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
  • 史上最全的CSS hack方式一覽(兼容多瀏覽器)

    為了獲得統(tǒng)一的頁面效果,就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式,我們把這個(gè)針對不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過程,叫做CSS hack!
    2016-09-11
  • 淺談各種瀏覽器下的CSS Hack兼容性寫法

    這篇文章主要介紹了各種瀏覽器下的CSS Hack兼容性寫法,CSS Hack大致可以分為內(nèi)部Hack和選擇器Hack以及HTML頭部引用Hack,需要的朋友可以參考下
    2016-03-14
  • CSS瀏覽器兼容性Hack大全

    本文匯總了一些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 hack
    2013-10-25
  • IE10 CSS Hack介紹及IE11的CSS Hack提前了解

    一個(gè)頁面IE10下有問題,IE9下測試了一下,也有同樣的問題。悲劇了趕緊找IE10的hack,下面的方法還是比較實(shí)用的,感興趣的朋友可以參考下
    2013-09-16
  • IE9的css hack使用示例

    ie9一出css hack也該更新,以前一直沒關(guān)注,今天在內(nèi)部參考群mxclion分享了IE9的css hack,拿出來也分享一下,需要的朋友可以學(xué)習(xí)下
    2013-09-16
  • IE6789,FF之間Css Hack整理

    大家在使用的過程中,需要注意書寫順序
    2012-11-10
  • CSS hack 介紹及速查對照表

    學(xué)習(xí)CSS,除了基礎(chǔ),還有必學(xué)的一課,就是CSS hack,很多書籍上都有涉及。當(dāng)時(shí)覺得這個(gè)東西很神秘,可以針對某個(gè)或某些瀏覽器寫些特別的 CSS 樣式而不影響其他,而且用起來
    2011-09-05
  • css hack問題

    ie5 hack, ie 6 hack, ie 8 hack,ie 9 我沒用,暫時(shí)也沒接觸過9的hack,隨著瀏覽器的更新(而且換代越來越快),是不是我有寫不完的hack,還是說高手從不寫hack。
    2011-07-22

最新評論