IE8的css hack \9 应用表明

2021-03-18 15:49 jianzhan

最先谢谢“丸子”出示的这个IE8的css hack;
关心过IE8的css hack的人坚信大伙儿都在应用这个hack,便是“\9”的css hack:

.test{ 
color:#000000; /* FF,OP适用 */ 
color:#0000FF\9; /* 全部IE访问器(ie6+)适用 ;可是IE8不可以鉴别“*”和“_”的css hack;因此大家能够这样写hack */ 
[color:#000000;color:#00FF00; /* SF,CH适用 */ 
*color:#FFFF00; /* IE7适用 */ 
_color:#FF0000; /* IE6适用 */ 
}

包含我自身也是应用这类的,这是我前段時间梳理的《流行访问器的1些CSS hack》。
许多人再科学研究color:#0000FF\9;中的为何IE6-IE8适用“\9”写法,和它的基本原理,我只是个工程项目师,并不是科学研究家,我不懂为何和它的真实基本原理,真的!很愧疚!
昨日在某个群里也看到一部分前端开发工程项目师或网页页面重构师势利的1面,一样的1个处理计划方案,大企业着名的前端开发工程项目师或网页页面重构师写的物品都追捧,而小企业没知名度的前端开发工程项目师或网页页面重构师写的处理计划方案却被反诘:“css有这类写法吗?来看你连最基础的css的几个特性和特性值都没搞懂;即使你处理了难题你写的css也是不标准的,便是标准你跟我讲讲你处理计划方案的基本原理;”一样的1个处理计划方案,大企业着名的前端开发工程项目师或网页页面重构师写的这些反诘提出质疑就统统没了,拼命的去科学研究他这个处理计划方案,呵呵,我感觉那些人很好笑。也有许多人问难题仅有获得大企业着名的前端开发工程项目师或网页页面重构师的毫无疑问回应后才安心而又高兴的走了,乃至不留1句感谢。自然没人(包含我)否认大企业着名的前端开发工程项目师或网页页面重构师在业界的危害力,她们为前端开发和重构业界做的奉献大伙儿全是看获得的,只是感觉做人(非常是大家做技术性的)不可以太势利,多1点技术性共享资源和讨论,多1点感谢,学习培训发展才是最关键的。我认可我之前常常骂人,骂人家SB,内参国王说的对,骂人家SB就等于骂自身SB,我之前是很SB。不想讨论就看着呗,骂人是不对的!
扯远了,返回IE8的CSS hack,讲讲color:#0000FF\9:
color:#0000FF\9的hack适用IE6-IE8(别的版本号沒有检测),可是IE8不可以鉴别“*”和“_”的css hack,因此大家可使用

color:#0000FF\9; ;/*ie6,ie7,ie8*/
*color:#FFFF00;/*ie7*/
_color:#FF0000;/*ie6*/

来区别IE的各个版本号。

表明:在规范方式中

“-″减号是IE6特有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都起效
“\0″ IE8/IE9/IE10都起效,是IE8/9/10的hack
“\9\0″ 只对IE9/IE10起效,是IE9/10的hack

检测编码

<script type="text/javascript">  
    //alert(document.compatMode);  
</script>  
<style type="text/css">  
body:nth-of-type(1) .iehack{  
    color: #F00;/* 对Windows IE9/Firefox 7+/Opera 10+/全部Chrome/Safari的CSS hack ,挑选器也可用基本上所有Mobile/Linux/Mac browser*/  
}  
.demo1,.demo2,.demo3,.demo4{  
    width:100px;  
    height:100px;  
}  
.hack{  
/*demo1 */  
/*demo1 留意次序,不然IE6/7下将会没法正确显示信息,致使結果显示信息为白色情况*/  
    background-color:red; /* All browsers */  
    background-color:blue !important;/* All browsers but IE6 */  
    *background-color:black; /* IE6, IE7 */  
    +background-color:yellow;/* IE6, IE7*/  
    background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */  
    background-color:purple\0; /* IE8, IE9, IE10 */  
    background-color:orange\9\0;/*IE9, IE10*/  
    _background-color:green; /* Only works in IE6 */  
    *+background-color:pink; /*  WARNING: Only works in IE7 ? Is it right? */  
}  
  
/*能够根据javascript检验IE10,随后给IE10的<html>标识再加class=”ie10″ 这个类 */  
.ie10 #hack{  
    color:red; /* Only works in IE10 */  
}  
  
/*demo2*/  
.iehack{  
/*该demo案例是用于区别规范方式下ie6~ie9和Firefox/Chrome的hack,留意次序 
IE6显示信息为:翠绿色, 
IE7显示信息为:黑色, 
IE8显示信息为:鲜红色, 
IE9显示信息为:蓝色, 
Firefox/Chrome显示信息为:橘色, 
(本例IE10实际效果同IE9,Opera全新版实际效果同IE8) 
*/  
    background-color:orange;  /* all - for Firefox/Chrome */  
    background-color:red\0;  /* ie 8/9/10/Opera - for ie8/ie10/Opera */  
    background-color:blue\9\0;  /* ie 9/10 - for ie9/10 */  
    *background-color:black;  /* ie 6/7 - for ie7 */  
    _background-color:green;  /* ie 6 - for ie6 */  
}  
  
/*demo3 
案例是用于区别规范方式下ie6~ie9和Firefox/Chrome的hack,留意次序 
IE6显示信息为:鲜红色, 
IE7显示信息为:蓝色, 
IE8显示信息为:翠绿色, 
IE9显示信息为:粉色, 
Firefox/Chrome显示信息为:橘色, 
(本例IE10实际效果同IE9,Opera全新版实际效果也同IE9为粉色) 
 
*/  
.element {  
    background-color:orange;    /* all IE/FF/CH/OP*/  
}  
.element {  
    *background-color: blue;    /* IE6+7, doesn't work in IE8/9 as IE7 */  
}  
.element {  
    _background-color: red;     /* IE6 */  
}  
.element {  
    background-color: green\0; /* IE8+9+10  */  
}  
:root .element { background-color:pink\0; }  /* IE9+10 */  
  
/*demo4*/  
/* 
 
该案例是用于区别规范方式下ie6~ie10和Opera/Firefox/Chrome的hack,本例非常要留意次序 
IE6显示信息为:橘色, 
IE7显示信息为:粉色, 
IE8显示信息为:黄色, 
IE9显示信息为:紫色, 
IE10显示信息为:翠绿色, 
Firefox显示信息为:蓝色, 
Opera显示信息为:黑色, 
Safari/Chrome显示信息为:灰色, 
 
*/  
.hacktest{   
    background-color:blue;      /* 都鉴别,此处对于firefox */  
    background-color:red\9;      /*all ie*/  
    background-color:yellow\0;    /*for IE8/IE9/10 全新版opera也了解*/  
    +background-color:pink;        /*for ie6/7*/  
    _background-color:orange;       /*for ie6*/  
}  
  
@media screen and (min-width:0){   
    .hacktest {background-color:black\0;}  /*opera*/  
}   
@media screen and (min-width:0) {   
    .hacktest { background-color:purple\9; }/*  for IE9/IE10  PS:海外一些习惯性常创作\0,压根没考虑到Opera也了解\0的具体 */  
}  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {   
   .hacktest { background-color:green; } /* for IE10+ 此写法能够兼容到高比照度和默认设置方式,故可遮盖全部ie10的方式 */  
}  
@media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} }  /*for Chrome/Safari*/  
  
/* #963棕色 :root is for IE9/IE10, 优先选择级高于@media, 慎用!假如2者适用,必要时在@media款式添加 !important 才可以区别IE9和IE10 */  
/* 
:root .hacktest { background-color:#963\9; }  
*/  
</style>  

更多的详细介绍能够参照这篇文章内容:https://www.jb51.net/css/493362.html

至于为何应用“\9”我真的不清晰缘故,可是“丸子”检测了别的0⑴3的数据,最后結果以下:

在其中:OP表明Opera,SA表明Safari,Ch表明Chrome;自然你假如也有细心能够检测“\14”,“\15”,“\16”。。。

从上面检测結果大家能够看出“\0”的写法只被IE8鉴别,ie6,ie7都不可以鉴别,那末“\0”应当是IE8的真实hack。流行访问器的 CSS hack这样更好1些:

拷贝编码
编码以下:

.test{
color:#000000; /* FF,OP适用 */
color:#0000FF\0; /* IE8适用*/
[color:#000000;color:#00FF00; /* SF,CH适用 */
*color:#FFFF00; /* IE7适用 */
_color:#FF0000; /* IE6适用 */
}

在其中:OP表明Opera,SA表明Safari,Ch表明Chrome;
此外伴随着google Chrome和Safari访问器的时兴,找google Chrome和Safari CSS hack的人也很多。我也找了1下:

拷贝编码
编码以下:

body:nth-of-type(1) .CH{
&nbsp;&nbsp; color: #FF0000;/* 这是专业对于Chrome和Safari的CSS hack */
}