• 欢迎访问杨思积的博客,专注于前端资讯分享,前端技术交流!

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

技术分析 Tomy 477次浏览 已收录 0个评论 扫描二维码

原则上真心不支持大家使用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,大家用不同浏览器点击查看吧。大家觉得有用,就点个赞;如果觉得没啥用处、或者发现什么错误的,那也就这样了。


杨思积的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明CSS HACK 支持IE6|7|8|9|10|11
喜欢 (0)
[嘿嘿,你懂的]
分享 (0)
Tomy
关于作者:
一个前端爱好者!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址