css hack

什么是css  hack

由于各厂家的浏览器不同或者版本不同，对css的解析认识不一样，因此会导致生成的页面效果不一样，这时需要针对不一样的浏览器去写css。

css  hack的目的是为了使CSS代码兼容不同的浏览器。

         CSS Hack大致有3种表现形式：IE条件注释法（HTML条件注释Hack）、CSS属性前缀法（类内部Hack）、选择器前缀法（选择器Hack）。

1.    IE条件注释法（即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。）

•     只在IE下生效：    <!--[if IE]>......这段文字只在IE浏览器显示.........<![endif]-->
•     只在IE6下生效:    <!--[if IE 6]>.....这段文字只在IE6浏览器显示.......<![endif]-->
•     只在IE6以上版本生效:   <!--[if gte IE 6]>...-......这段文字只在IE6以上(包括)版本IE浏览器显示.......<![endif]-->
•    只在IE8上不生效:    <!--[if ! IE 8]>........这段文字在非IE8浏览器显示............<![endif]-->
•    非IE浏览器生效:    <!--[if !IE]>..........这段文字只在非IE浏览器显示..........<![endif]-->

<!--  lt是小于 gt是大于 lte是小于等于 gte是不小于 !是不等于 -->

<!-- [if IE]>你想要执行的代码 <![endif]--><!-- [if lt IE 8]>你想要执行的代码 <![endif]--><!-- [if ! IE 8]>你想要执行的代码 <![endif]-->

2.属性前缀法
          即是给css的属性添加前缀。比如 * 可以被IE6/IE7识别，但 _ 只能被IE6识别，IE6-IE10都可以识别 "\9"，IE6不能识别!important  FireFox不能识别 * _  \9

         

         

可以先使用“\9"标记，将IE分离出来，再用”*"分离出IE6/IE7，最后可以用“_”分离出IE6.type{color: #111; /* all */color: #222\9; /* IE */*color: #333; /* IE6/IE7 */_color: #444; /* IE6 */}所以可以按着优先级就能给特定的版本捎上特定颜色

一般来说，只有IE6不支持 !important 所以可以这样#example{    width: 100px !important; /* IE7  FF */    width: 110px; /* IE6 */因为!important 具有最高优先级，所以此种方式可以区别出来~

         

3.  选择器前缀法，顾名思义，就是给选择器加上前缀。

IE6可识别 *div{ position: absolute}  IE7可识别 *+div{ position: absolute}

*html        *前缀只对IE6生效
*+html     *+前缀只对IE7生效
@media screen\9{...}    只对IE6/7生效
@media \0screen {body { background: red; }}     只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}   只对IE6/7/8有效
@media screen\0 {body { background: green; }}    只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }}    只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
等等