IE8的css hack \9 使用说明

所属分类: 网页制作 / CSS 阅读数: 325
收藏 0 赞 0 分享

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

更多的介绍可以参考这篇文章:https://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 */
}
更多精彩内容其他人还在看

利用纯CSS3实现动态的自行车特效源码

这篇文章主要介绍了如何利用纯CSS3实现动态的自行车的方法,文中给出了完整的实例代码,实现后的效果非常不错,大家可以直接运行看看效果,需要的朋友下面来一起学习学习吧。
收藏 0 赞 0 分享

web前端开发规范文档(2014年版本)

这篇文章主要为大家介绍了前端开发团队遵循和约定的代码书写规范,意在提高代码的规范性和可维护性,需要的朋友可以参考下
收藏 0 赞 0 分享

前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范

这篇文章主要介绍了前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范,需要的朋友可以参考下
收藏 0 赞 0 分享

手把手教你用CSS实现带箭头的流程进度条

这篇文章主要给大家介绍了利用CSS实现带箭头的流程进度条大方法,文中给出了详细的示例代码,对大家具有一定的参考价值,有需要的朋友们一起来看看吧。
收藏 0 赞 0 分享

CSS实现三栏布局的四种方法示例

可能有人不理解三栏布局是什么,其实三栏布局页面分为左中右三部分,然后对中间一部分做自适应的一种布局方式,下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法,需要的朋友可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

利用css实现浮雕效果示例代码

这篇文章主要给大家介绍了利用css如何实现浮雕的效果,文中给出了详细的示例代码和解释,相信对大家有一定的参考价值,感兴趣的朋友们下面来一起看看吧。
收藏 0 赞 0 分享

浏览器默认样式(User Agent Stylesheet)的介绍与最佳处理方法

这篇文章主要给大家介绍了浏览器默认样式(User Agent Stylesheet)的相关资料,并给出了相对应的最佳解决方法。有需要的朋友可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

css中px、em和rem的区别总结

相信每位前端工程师们都有这么一个体会,国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?下面这篇文章小编就来给大家详细介绍关于css中px、em和rem的区别,需要的朋友可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

CSS3实现点击放大的动画实例代码

这篇文章主要给大家介绍了关于利用CSS3实现点击放大的动画效果,文中给出了完整的实例代码,相信对大家具有一定的参考价值,需要的朋友们可以一起来看看吧。
收藏 0 赞 0 分享

利用css代码实现纸飞机效果实例源码

这篇文章主要给大家介绍了如何利用css代码实现纸飞机的效果,实现后效果非常不错,文中给出了详细的实例代码,大家可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享
查看更多