浏览器兼容之条件注释,cssHack

浏览数：27 / 时间：2015年06月09日

对于形形色色的浏览器，随之而来的就是一些兼容问题，大多应该都是IE下的兼容问题，因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求，或者说违背了浏览器的某些规则而先造成的，所以我们应该尽量通过结构或CSS的修改来达到各浏览器渲染一致效果！

条件表达式（注：条件注释只能用在IE5-IE9，因为微软已经在IE10以后的版本中已禁用IE特有的条件注释功能,详情见:https://msdn.microsoft.com/zh-cn/library/ie/hh801214%28v=vs.85%29.aspx）

    <!--[if IE n]>
        ...
    <![endif]-->
<!--专对于IEn的一些样式-->
    <!--[if gt IE n]>
        ...
    <![endif]-->
<!--专对于IEn以上版本的一些样式-->
    <!--[if lt IE n]>
        ...
    <![endif]-->
<!--专对于IEn以下版本的一些样式-->
<!--[if gte IE n]>
        ...
    <![endif]-->
<!--专对于IEn及以上版本的一些样式-->
<!--[if lte IE n]>
        ...
    <![endif]-->
<!--专对于IEn及以下版的一些样式-->
　　<!--[if !ie]><-->
    <!--<![endif]-->
<!--专对于除IE以外的一些样式-->

条件样式不但能用在样式上，还能用在javascript上，但是请留意条件注释只会在IE9及以下版本下识别。

例如下面这一段代码只会在IE9下才会起用用，但是你把9改成10，在IE10下是没有任何效果的

　　<!--[if IE 9]>
    <style type="text/css">
        .typ{background:blue}
    </style>
    <script type="text/javascript">
        alert("this is IE浏览器！");
    </script>
    <![endif]-->
　　<!--下面的这一段代码在IE10下是没有任何效果的-->
　　<!--[if IE 10]>
    <style type="text/css">
        .typ{background:blue}
    </style>
    <script type="text/javascript">
        alert("this is IE浏览器！");
    </script>
    <![endif]-->

<!--下面的这一段代码除了在火狐，chrome下会弹出外，在IE10也会弹出-->

　　<!--[if !ie]><-->
　　　　<script type="text/javascript">
        alert("this is not IE浏览器！");
    　　</script>
    <!--<![endif]-->

综上所述，条件注释只能用来用来解决IE9下的兼容问题，当然一般遇到样式兼容问题一般都是IE6-IE8下。

cssHack解决样式兼容问题:cssHack分为从css选择器和css属性上来区别不同的Hack写法

css选择器写法

/*1、IE6以及IE6以下版本浏览器*/
    * html .demo {color: green;}
        
/*2、仅仅IE7浏览器*/
   *:first-child+html .demo {color: green;}

/*3、除IE6之外的所有浏览器（IE7-9, Firefox,Safari,Opera）*/
    html>body .demo {color: green;}

/*4、IE8-9,Firefox,Safari,Opear*/
     html>/**/body .demo {color: green;}

/*5、IE9+*/
    :root .demo {color: red;}

/*6、Firefox浏览器*/
    @-moz-document url-prefix() {
                      .demo {
                         color: red;
                      }
                    }

/*6、Webkit内核浏览器（Safari和Google Chrome）*/
    @media screen and (-webkit-min-device-pixel-ratio:0)    {
                        .demo { color: red; }
                    }

/* 7、Opera浏览器*/
   @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
                        head~body  .demo { color: red; }
                    }

/*8、iPhone / mobile webkit*/
   @media screen and (max-device-width: 480px) {
                        .demo { color: red  }
                    }

CSS属性Hack写法

/*1、IE6浏览器*/
    .demo {_color: red;}

 /*2、IE6-7浏览器识别*/
    .demo {*color: red;}

 /*3、所有浏览器除IE6浏览外*/
    .demo {color/**/:red;}
        
/*4、IE6-9浏览器*/
    .demo {color: red\9;}
        
 /*5、IE7-8浏览器*/
    .demo {color/*\**/:red\9;}

使用实例

.demo {
  color: red;/*所有现代浏览器*/
  color: green\9;/*所有IE浏览器*/
  color: lime\0;/*IE8-9浏览器*/
  *color: red;/*IE6-7浏览器*/
 +color: blue;/*IE7浏览器*/
 _color: orange;/*IE6浏览器*/
 }
 :root .demo {color: #963\9;}
 @-moz-document url-prefix(){
　　.demo{color:#897;}/* all firefox */
  } 
@media screen and (-webkit-min-device-pixel-ratio:0){
    .demo { color: #000; }/*webkit*/
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
    head~body  .demo { color: red; }/*opera*/
}