IE8的css hack \9 使用说明

互联网   03-06 11:13:17   作者:佚名   我要评论

关注过IE8的css hack的人相信大家都在使用这个hack,就是“\9”的css hack

首先感谢“丸子”提供的这个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支持 */ 
}

包括我自己也是使用这种的,这是我前段时间整理的《主流浏览器的一些CSS hack》。
很多人再研究color:#0000FF\9;中的为什么IE6-IE8支持“\9”写法,和它的原理,我只是个工程师,不是科学家,我不懂为什么和它的真正原理,真的!很惭愧!
昨天在某个群里也看到部分前端工程师或网页重构师势利的一面,同样的一个解决方案,大公司有名的前端工程师或网页重构师写的东西都追捧,而小公司没名气的前端工程师或网页重构师写的解决方案却被反问:“css有这种写法吗?看来你连最基本的css的几个属性和属性值都没搞懂;就算你解决了问题你写的css也是不规范的,就是规范你跟我讲讲你解决方案的原理;”同样的一个解决方案,大公司有名的前端工程师或网页重构师写的这些反问质疑就全都没了,拼命的去研究他这个解决方案,呵呵,我觉得那些人很可笑。还有很多人问问题只有得到大公司有名的前端工程师或网页重构师的肯定回答后才放心而又开心的走了,甚至不留一句谢谢。当然没人(包括我)否认大公司有名的前端工程师或网页重构师在业界的影响力,他们为前端和重构业界做的贡献大家都是看得到的,只是觉得做人(特别是我们做技术的)不能太势利,多一点技术共享和探讨,多一点感激,学习成长才是最重要的。我承认我以前经常骂人,骂人家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, 慎用!如果二者合用,必要时在@media样式加入 !important 才能区分IE9和IE10 */  
/* 
:root .hacktest { background-color:#963\9; }  
*/  
</style>  

更多的介绍可以参考这篇文章:http://www.jb51.net/css/493362.html

至于为什么使用“\9”我真的不清楚原因,但是“丸子”测试了其他0-13的数字,最终结果如下:

2009-07-18_125722

其中:OP表示Opera,SA表示Safari,Ch表示Chrome;当然你如果还有耐心可以测试“\14”,“\15”,“\16”。。。

从上面测试结果我们可以看出“\0”的写法只被IE8识别,ie6,ie7都不能识别,那么“\0”应该是IE8的真正hack。主流浏览器的 CSS hack这样更好一些:

复制代码
代码如下:

.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的人也不少。我也找了一下:

复制代码
代码如下:

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

相关文章

  • 针对IE浏览器的兼容问题小结

    这篇文章主要介绍了针对IE浏览器的兼容问题小结,需要的朋友可以参考下
    2017-04-19
  • 避免不必要的浏览器兼容性问题的5个技巧

    浏览器兼容性问题总是让人很头疼,这里介绍几个技巧来避免这个问题,需要的朋友可以参考下
    2017-04-08
  • IE6下兼容性常见的几个问题与解决方法

    关于IE6兼容性问题有很多值得学习的地方,本文就给大家介绍一下在IE6下兼容性常见的几个问题,以及相对应的解决方法。希望通过本文的介绍大家对IE6兼容性的认识能更深一些
    2016-11-05
  • 解决360双核浏览器兼容模式的页面显示问题

    当前360浏览器占据的浏览器市场20%以上的份额,我们做网站的肯定要考虑一下兼容性,有时候chrome与ie正常,但到了360浏览器就不行了,可能360双核的ie核心比较偏低版本的原
    2016-11-03
  • CSS hacker使用小结(兼容IE6、7、8)

    今天,结合自己的经验和理解,做了几个demo把IE6~IE8和其他标准浏览器的CSS hack做一个总结
    2016-09-11
  • 史上最全的CSS hack方式一览(兼容多浏览器)

    为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!
    2016-09-11
  • ie6 z-index不起作用的完美解决方法

    下面小编就为大家带来一篇ie6 z-index不起作用的完美解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 浅谈浏览器的兼容性(必看篇)

    下面小编就为大家带来一篇浅谈浏览器的兼容性(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-25
  • 如何判断PC端浏览器内核

    如何判断PC端浏览器内核?下面小编就为大家带来一篇判断PC端浏览器内核的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-18
  • 详解IE浏览器的haslayout属性及相关兼容性问题解决

    haslayout是IE浏览器专有的属性,然而这个属性却同样会给不同版本的IE带来浮动问题等一些列兼容性上面的麻烦...这里我们就来详解IE浏览器的haslayout属性及相关兼容性问题解
    2016-07-08

最新评论