CSS HACK 支持IE6|7|8|9|10|11
原则上真心不支持大家使用hack,能不用hack就不用hack,但到了实际操作的时候却不得不用到hack。
本文纯实例展示,来个参考DEMO,这样更加直观一点,不写那么多理论的东西了,理论的东西百度下就可以找到很多;我不生产代码,我只是代码的搬运工。
本文只写CSS HACK,html、js的HACK就不写了。是的,就是这么任性。
单独HACK实例
IE6
1 | .a { _background : #aaa ;} |
IE7|8
1 | .b {* background :yellow;} |
IE7|8|9|10
1 | .c {background:orange\ 9 ;} |
IE8|9|10|11
1 | .d { background : red \ 0 ;} |
IE9|10|11
1 2 3 | @media all and ( min-width : 0 ) { .e { background : green \ 0 ; } } |
IE10|11
1 2 3 | @media screen and ( - ms - high - contrast: active), ( - ms - high - contrast: none) { .f {background:blue;} } |
综合实例
其他 黑色 | ie6 灰色 | ie7 黄色 | ie8 橙色 | ie9 绿色 | ie10.11 蓝色
1 2 3 4 5 6 7 8 9 10 11 12 | .g { background : black ; background :orange\ 9 ; * background :yellow; _background : #aaa ; } @media all and ( min-width : 0 ) { .g { background : green \ 9 ; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none ) { .g { background : blue ;} } |
ie7.8 橙色 | 其他.ie9.10.11 绿色透明 (如:判断是否支持background半透明)
1 2 3 4 5 6 | .h { background :orange\ 9 ; } @media all and ( min-width : 0 ) { .h { background :rgba( 0 , 128 , 0 ,. 5 ); } } |
其他 黑色 | ie7.8.9 橙色 | ie10.11 蓝色 (如:判断是否支持css3动画)
1 2 3 4 5 6 | .i { background :orange\ 9 ; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none ) { .i { background : blue ;} } |
参考DEMO
最后,来个DOMO,大家用不同浏览器点击查看吧。大家觉得有用,就点个赞;如果觉得没啥用处、或者发现什么错误的,那也就这样了。
手机阅读请扫描下方二维码:
1

1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1

1

1

1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1