Css Hack

CSS hack 汇总
1、IE条件注释法,微软官方推荐的hack方式。

只在IE下生效

<!--[if IE]>
这段文字只在IE浏览器上显示
<![endif]-->
1
2
3
只在IE6下生效

<!--[if IE 6]>
这段文字只在IE6浏览器上显示
<![endif]-->
1
2
3
只在IE6以上版本生效

<!--[if gt IE 6]>
这段文字只在IE6以上版本IE浏览器上显示
<![endif]-->
1
2
3
只在IE7上不生效

<!--[if ! IE 7]>
这段文字在非IE7浏览器上显示
<![endif]-->
1
2
3
非IE浏览器生效

<!--[if !IE]><!-->
这段文字只在非IE浏览器上显示
<!--<![endif]-->
1
2
3
2、选择符前缀法,即在CSS选择符前加一些只有特定浏览器才能识别的前缀。

*html 前缀只对IE6生效
*+html 前缀只对IE7生效
1
2
例如:

.test{ color:#FFF;}
*html .test{ color:#000;} /* only for ie6 */
*+html .test{ color:#CCC;} /* only for ie7 */
1
2
3
3、 属性前缀法,即在样式属性名前加一些只有特定浏览器才能识别的前缀。

'-' 只对IE6生效
'*' 只对IE6和IE7生效
1
2
例如:

.test{ color:#FFF; *color:#CCC; -color:#000;}
1
4、在属性值后加上一些只有特定浏览器才能识别的前缀。

'\9' 只针对IE6/IE7/IE8生效 IE6/IE7/IE8/IE9/IE10都生效
'\0' 只针对 IE8生效 IE8/IE9/IE10都生效
'\9\0' 只对IE9/IE10生效
1
2
3
例如:

.header .headerListHide {
  overflow: hidden;
  height: 32px;
  display: flex;
  display: -ms-flexbox; /* IE 10 */  
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;  
   -moz-flex-wrap: wrap;  
   -ms-flex-wrap: wrap;  
  -o-flex-wrap: wrap;  
  flex-wrap: wrap;  
  width: 1019px\9\0;

}

  在ie11 ie9 ie10 测试有效果

posted @ 2020-07-14 17:07  1点  阅读(197)  评论(0编辑  收藏  举报