做有态度的前端团队

网易FEG前端团队

CSS HACK 支持IE6|7|8|9|10|11

原则上真心不支持大家使用hack,能不用hack就不用hack,但到了实际操作的时候却不得不用到hack。
本文纯实例展示,来个参考DEMO,这样更加直观一点,不写那么多理论的东西了,理论的东西百度下就可以找到很多;我不生产代码,我只是代码的搬运工。
本文只写CSS HACK,html、js的HACK就不写了。是的,就是这么任性。

单独HACK实例

IE6

.a {_background:#aaa;}

IE7|8

.b {*background:yellow;}

IE7|8|9|10

.c {background:orange\9;}

IE8|9|10|11

.d {background:red\0;}

IE9|10|11

@media all and (min-width:0) {
    .e {background:green\0; }
}

IE10|11

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .f {background:blue;}
}

综合实例

其他 黑色 | ie6 灰色 | ie7 黄色 | ie8 橙色 | ie9 绿色 | ie10.11 蓝色

.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半透明)

.h {
    background:orange\9;
}
@media all and (min-width:0) {
    .h {background:rgba(0,128,0,.5); }
}

其他 黑色 | ie7.8.9 橙色 | ie10.11 蓝色 (如:判断是否支持css3动画)

.i {
    background:orange\9;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .i {background:blue;}
}

参考DEMO
最后,来个DOMO,大家用不同浏览器点击查看吧。大家觉得有用,就点个赞;如果觉得没啥用处、或者发现什么错误的,那也就这样了。

手机阅读请扫描下方二维码:

已有 47 条评论

  1. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  2. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  3. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  4. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  5. 1

    1

  6. 1

    1

  7. 1

    1

  8. 1

    1

  9. 1

    1

  10. 1

    1

  11. 1

    1

  12. 1

    1

  13. 1

    1

  14. 1

    1

  15. 1

    1

  16. 1

    1

  17. 1

    1

  18. 1

    1

  19. 1

    1

  20. 1

    1

  21. 1

    1

  22. 1

    1

  23. 1

    1

  24. 1

    1

  25. 1

    1

  26. 1

    1

  27. 1

    1

  28. 1

    1

  29. 1

    1

  30. 1

    1

  31. 1

    1

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif