IE8的css hack 9 使用说明

2020-05-10 11:22:30易采站长站整理

+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>

更多的介绍可以参考这篇文章: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; /* 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 */
}