css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的示例

小編給大家分享一下css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

網(wǎng)站兼容性調(diào)試實在令人煩心，現(xiàn)在的網(wǎng)站設(shè)計人員真的要比以前費力很多，因為網(wǎng)頁代碼不再是只需滿足一個IE6訪問就行，而是要滿足N多的瀏覽器訪問正常才行。粗略算一下，目前至少要滿足如下的瀏覽器要求：IE8、IE9、IE10、IE11、Chrome、Firefox，由于360使用的是Chrome內(nèi)核，所以滿足Chrome基本就滿足了360。而IE家族真是一個版本一個樣，我說IE怎么這么喜歡折騰呢？這給網(wǎng)頁設(shè)計師帶來多大的麻煩呀！今天，我就把這幾個主要瀏覽器的CSS hack代碼匯總一下。

例如現(xiàn)有CSS代碼如下：

.divContent{
    background-color:#eee;
}

那么下面我們就來寫一下，如何使代碼兼容幾個主流瀏覽器。

/* IE8+ */
.divContent{
    background-color:#eee\0;
}
/* IE8、IE9 */
.divContent{
    background-color:#eee\8\9\0;
}
/* IE9 */
.divContent{
    background-color:#eee\9\0;
}

注意，\8\0的寫法是錯誤的，不能試圖這樣hack IE8。上述代碼沒有對IE10和IE11分別hack（好像沒有對這兩個瀏覽器單獨hack的寫法），那么IE10和IE11使用的就是IE8+那個樣式。

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的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！