您的位置：首页 > Web前端 > > 正文

ie浏览器css颜色兼容（IE8的css hack9 使用说明）

更多时间：2021-11-03 12:45:19 类别：Web前端浏览量：1345

ie浏览器css颜色兼容

IE8的css hack9 使用说明

首先感谢“丸子”提供的这个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的数字，最终结果如下：

ie浏览器css颜色兼容（IE8的css hack9 使用说明）

其中：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{
   color: #FF0000;/* 这是专门针对Chrome和Safari的CSS hack */
}

标签：IE8 Hack css

上一篇：vue调用后台接口实现预览（vue实现集成腾讯TIM即时通讯）

下一篇：webaccess签名设置（.htaccess文件写法之作用范围）

您可能感兴趣

ie浏览器css颜色兼容（IE8的css hack9 使用说明）

ie浏览器css颜色兼容

热门推荐

排行榜