首先感谢“万子”提供这个IE8 csshack；
关注过 IE8 csshack 的朋友相信你们都在用这个 hack，它就是“9”csshack：
.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 Hacks》。
很多人在研究为什么IE6-IE8支持“9”的颜色书写：#0000FF9； 及其原理。 我只是一名工程师，不是科学家。 我不明白为什么及其真正的原理。 真的吗！ 很高兴！
今天在群里，我也听到了一些后端工程师或者网页建设者自私的一面。 同样的解决方案受到大公司著名后端工程师或网页构建者的青睐，但在小公司则不然。 后端工程师或网页构建者写的解决方案遭到质疑：“CSS有这些写法吗？看来你连最基本的CSS属性和属性值都不懂；即使解决了问题，你写的css也是非标准的，它是标准化的，请告诉我你的解决方案的原理；” 对于同一个解决方案，大公司的著名后端工程师或网页构建者写的所有反驳和指责都消失了。 去研究一下他的解决方案吧，哈哈，我觉得这些人都是傻子。 也有很多人提出问题，只得到大公司知名后端工程师或网页建设者的肯定答复css使用示例，就心满意足地离开了css使用示例，连一句感谢的话也没有留下。 事实上，没有人（包括我）证实了业内大公司中著名后端工程师或Web架构师的影响力。 你可以看到他们对后端和建设行业的贡献，但我觉得作为一个人（尤其是我们技术）不应该太刻薄，多分享和讲解技术，多一点感恩，学习和成长才是最重要的事物。 我承认我以前经常骂人，说别人SB。 内参王说得对。 说别人SB就等于说自己SB。 我以前很SB。 如果不想详细说明，就看吧。 骂人是不对的！
更进一步，我们回到IE8的CSShack，谈谈color:#0000FF9：
color:#0000FF9的hack支持IE6-IE8（其他版本未测试），而IE8无法识别“*”和“_”的csshack，所以我们可以使用
颜色:#0000FF9;;/*ie6,ie7,ie8*/
*颜色:#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
测试代码
//alert(document.compatMode);
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的标签加上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; }
*/
发表评论