css区别ie8/ie9/ie10/ie11 chrome firefox的编码

日期：2021-01-20 类型：科技新闻 

关键词：如何创建网站，免费网站建站，网站建设文章，网站建设7个基本流程，自动建站

网站适配性调节确实让人烦心，如今的网站制作人员真的要比之前费劲许多，由于网页页面编码已不是只需考虑1个IE6浏览就行，而是要考虑N多的访问器浏览一切正常才行。粗略地算1下，现阶段最少要考虑以下的访问器规定：IE8、IE9、IE10、IE11、Chrome、Firefox，因为360应用的是Chrome核心，因此考虑Chrome基础就考虑了360。而IE大家族简直1个版本号1个样，我说IE如何这么喜爱折腾呢？这给网页页面设计方案师带来多大的不便呀！今日，我就把这几个关键访问器的CSS hack编码汇总1下。

比如现有CSS编码以下：

.divContent{
    background-color:#eee;
}

那末下面大家就来写1下，怎样使编码适配几个流行访问器。

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

历经这样hack，网站访问器适配性难题便可以完善处理了。

在css中差别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⑶ */
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⑻ 外任何访问器 */
: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的材料请关心脚本制作之家其它有关文章内容！

上一篇：H5小手机游戏如何拆换手机游戏素材？ 返回下一篇：没有了