栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

IE8的css hack 9 使用说明

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

首先感谢“丸子”提供的这个IE8的css hack;
关注过IE8的css hack的人相信大家都在使用这个hack,就是“9”的css hack:

.test{ 
color:#000000;  
color:#0000FF9;  
[color:#000000;color:#00FF00;  
*color:#FFFF00;  
_color:#FF0000;  
}

包括我自己也是使用这种的,这是我前段时间整理的《主流浏览器的一些CSS hack》。
很多人再研究color:#0000FF9;中的为什么IE6-IE8支持“9”写法,和它的原理,我只是个工程师,不是科学家,我不懂为什么和它的真正原理,真的!很惭愧!
昨天在某个群里也看到部分前端工程师或网页重构师势利的一面,同样的一个解决方案,大公司有名的前端工程师或网页重构师写的东西都追捧,而小公司没名气的前端工程师或网页重构师写的解决方案却被反问:“css有这种写法吗?看来你连最基本的css的几个属性和属性值都没搞懂;就算你解决了问题你写的css也是不规范的,就是规范你跟我讲讲你解决方案的原理;”同样的一个解决方案,大公司有名的前端工程师或网页重构师写的这些反问质疑就全都没了,拼命的去研究他这个解决方案,呵呵,我觉得那些人很可笑。还有很多人问问题只有得到大公司有名的前端工程师或网页重构师的肯定回答后才放心而又开心的走了,甚至不留一句谢谢。当然没人(包括我)否认大公司有名的前端工程师或网页重构师在业界的影响力,他们为前端和重构业界做的贡献大家都是看得到的,只是觉得做人(特别是我们做技术的)不能太势利,多一点技术共享和探讨,多一点感激,学习成长才是最重要的。我承认我以前经常骂人,骂人家SB,内参国王说的对,骂人家SB就等于骂自己SB,我以前是很SB。不想探讨就看着呗,骂人是不对的!
扯远了,回到IE8的CSS hack,讲讲color:#0000FF9:
color:#0000FF9的hack支持IE6-IE8(其他版本没有测试),但是IE8不能识别“*”和“_”的css hack,所以我们可以使用

color:#0000FF9; ;
*color:#FFFF00;
_color:#FF0000;

来区分IE的各个版本。

说明:在标准模式中

“-″减号是IE6专有的hack
“9″ IE6/IE7/IE8/IE9/IE10都生效
“″ IE8/IE9/IE10都生效,是IE8/9/10的hack
“9″ 只对IE9/IE10生效,是IE9/10的hack

测试代码

  
  
body:nth-of-type(1) .iehack{  
    color: #F00;  
}  
.demo1,.demo2,.demo3,.demo4{  
    width:100px;  
    height:100px;  
}  
.hack{  
  
  
    background-color:red;   
    background-color:blue !important;  
    *background-color:black;   
    +background-color:yellow;  
    background-color:gray9;   
    background-color:purple;   
    background-color:orange9;  
    _background-color:green;   
    *+background-color:pink;   
}  
  
  
.ie10 #hack{  
    color:red;   
}  
  
  
.iehack{  
  
    background-color:orange;    
    background-color:red;    
    background-color:blue9;    
    *background-color:black;    
    _background-color:green;    
}  
  
  
.element {  
    background-color:orange;      
}  
.element {  
    *background-color: blue;      
}  
.element {  
    _background-color: red;       
}  
.element {  
    background-color: green;   
}  
:root .element { background-color:pink; }    
  
  
  
.hacktest{   
    background-color:blue;        
    background-color:red9;        
    background-color:yellow;      
    +background-color:pink;   
    _background-color:orange;  
}  
  
@media screen and (min-width:0){   
    .hacktest {background-color:black;}    
}   
@media screen and (min-width:0) {   
    .hacktest { background-color:purple9; }  
}  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {   
   .hacktest { background-color:green; }   
}  
@media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} }    
  
  
  
  

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

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


2009-07-18_125722

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

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

复制代码代码如下:
.test{
color:#000000;
color:#0000FF;
[color:#000000;color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
}

其中:OP表示Opera,SA表示Safari,Ch表示Chrome;
另外随着google Chrome和Safari浏览器的流行,找google Chrome和Safari CSS hack的人也不少。我也找了一下:

复制代码代码如下:
body:nth-of-type(1) .CH{
   color: #FF0000;
}
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/217738.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号