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 */
}
}
@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; }
/



