IE8的css hack 9 使用说�_电脑教程_软科�院

首先感谢丸��供的这个IE8的css hack；
关注过IE8的css hack的人相信大家都在使用这个hack，就是9的css hack：

.test{ color:#000000; /* FF,OP支� */ color:#0000FF9; /* 所有IE�览器(ie6+)支� ；但是IE8�能识别*和_的css hack；所以我们�以这样写hack */ [color:#000000;color:#00FF00; /* SF,CH支� */ *color:#FFFF00; /* IE7支� */ _color:#FF0000; /* IE6支� */ }

包括我自己也是使用这�的，这是我�段时间整�的《主��览器的一些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; ;/*ie6,ie7,ie8*/
*color:#FFFF00;/*ie7*/
_color:#FF0000;/*ie6*/

�区分IE的�个版本。

说�：在标准模�中

-��是IE6专有的hack
9 IE6/IE7/IE8/IE9/IE10都生效
IE8/IE9/IE10都生效，是IE8/9/10的hack
9 �对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:gray9; /* IE6, IE7, IE8, IE9, IE10 */ background-color:purple; /* IE8, IE9, IE10 */ background-color:orange9;/*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; /* ie 8/9/10/Opera – for ie8/ie10/Opera */ background-color:blue9; /* 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; /* IE8+9+10 */ } :root .element { background-color:pink; } /* 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:red9; /*all ie*/ background-color:yellow; /*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;} /*opera*/ } @media screen and (min-width:0) { .hacktest { background-color:purple9; }/* for IE9/IE10 PS:国外有些习惯常写作，根本没考虑Opera也认识的å®�é™… */ } @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:#9639; } */ /style

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

至�为什么使用9我真的�清楚�因，但是丸�测试了其他0-13的数字，最终结�如下：

其中：OP表示Opera，SA表示Safari，Ch表示Chrome；当然你如�还有�心�以测试，，。。。

�上�测试结�我们�以看出的写法�被IE8识别，ie6，ie7都�能识别，那么应该是IE8的真正hack。主��览器的 CSS hack这样更好一些：

�制代�代�如下:
.test{
color:#000000; /* FF,OP支� */
color:#0000FF; /* 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 */
}

转载请注明：范的资源库 » IE8çš„css hack 9 使用说æ˜�_电脑教程_软科å°�院