建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成都創(chuàng)新互聯(lián)公司公司2013年成立，先為江海等服務(wù)建站，江海等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為江海企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
網(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的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享標(biāo)題：css區(qū)分ie8/ie9/ie10/ie11chromefirefox的示例
轉(zhuǎn)載注明：http://www.ef60e0e.cn/article/jjppcj.html
