css代码以区分ie8 / ie9 / ie10 / ie11 chrome Firefox

网站兼容性调试确实很烦人. 当前的网站设计人员确实比以前更加费力，因为该网页代码不再只需要满足一次IE6访问，而是可以满足超过N个浏览器的正常访问. 正好. 粗略计算，至少必须满足以下浏览器要求: IE8，IE9，IE10，IE11ie10 浏览器css兼容问题，Chrome和Firefox. 由于360使用Chrome内核，因此Chrome基本满足360.我说IE系列确实是一个版本，为什么IE这么喜欢折腾？这对网页设计师来说有多少麻烦！今天，我将总结这些主要浏览器的CSS hack代码.

例如ie10 浏览器css兼容问题，现有的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的措词是错误的，您不应尝试像这样破解IE8. 上面的代码不会单独破解IE10和IE11（似乎没有办法分别破解这两个浏览器），然后IE10和IE11使用IE8 +的样式.

在IE家族遭到黑客入侵之后，让我们看看如何入侵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;
    }
}

此外，您可以像这样入侵其他浏览器

/* 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;
    }
}

发生此类黑客攻击后，可以完美解决网站浏览器兼容性问题.

/ ***** Style 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; /*  !后面的字串可以为任意字串 */

/ *****选择器破解****** /

/* 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 内核移动端 */
@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代码的详细内容，用于区分ie8 / ie9 / ie10 / ie11 chrome Firefox. 有关CSS区分ie11 chrome firefox的更多信息，请注意Script House的其他相关文章！

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-263789-1.html