文章目录
  1. 1. 什么是CSS Hack
  2. 2. CSS Hack原理
  3. 3. CSS Hack分类
    1. 3.1. IE条件注释法
    2. 3.2. 属性前缀法
    3. 3.3. 选择器前缀法
  4. 4. CSS Hack书写顺序
  5. 5. !important
  6. 6. 实例
  7. 7. CSS Hack利弊
  8. 8. 参考

大家在进行前端开发时,是不是偶尔会看到一些类似于下面的代码:

<!--[if IE]>

<![endif]-->

或者

div{
  background:green;
  *background:red; 
}

上面的类似于注释的代码还有前缀“*”的CSS代码,在平时自己写的时候很少用到,这其实是CSS Hack技术,下面我们就为大家介绍一下CSS Hack。

什么是CSS Hack

由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!

CSS Hack主要是针对IE浏览器。

CSS Hack原理

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优先级对浏览器展现效果的影响,我们可以据此针对不同的浏览器情景来应用不同的CSS。

CSS Hack分类

有三种表现形式。

IE条件注释法

这种方式是IE浏览器专有的Hack方式(IE10+不再支持),微软官方推荐使用的hack方式。例如:

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

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

只在IE6以上版本生效, lt表示低于,lte表示低于等于,gt表示高于
<!--[if gte IE 6]>
    这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->

非IE浏览器生效
<!--[if !IE]>
    这段文字只在非IE浏览器显示
<![endif]-->

属性前缀法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果。

各浏览器常用标记一览表:

简单说明:

  1. “-″减号是IE6专有的hack
  2. “\9″ IE6/IE7/IE8/IE9/IE10都生效
  3. “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
  4. “\9\0″ 只对IE9/IE10生效,是IE9/10的hack
  5. +” 、“ ” 只对IE6/7有效

选择器前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。例如:

  1. html 前缀只对IE6生效
  2. +html +前缀只对IE7生效
  3. @media screen\9{…}只对IE6/7生效
  4. @media \0screen {..}只对IE8有效
  5. @media \0screen\,screen\9{}只对IE6/7/8有效
  6. @media screen\0 {..} 只对IE8/9/10有效
  7. @media screen and (min-width:0\0) {..} 只对IE9/10有效
  8. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {..} 只对IE10有效
  9. @media screen and (-webkit-min-device-pixel-ratio:0){..} 只对chrome和safari有效
  10. @media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识。。。
  11. :root #test { background-color:purple\9; }只对IE9有效。格式:root 选择符 {属性\9;}

CSS Hack书写顺序

一般是将适用范围广、被识别能力强的CSS定义在前面。

浏览器优先级别:FF<IE7<IE6, CSS hack书写顺序一般为FF IE7 IE6

!important

由于IE6不支持!important,但是其他IE其他浏览器支持,所以很多人也将其作为一种CSS Hack的手段。

其实这是一个误区。!important常常被我们用来更改样式,而不是兼容hack。造成这个误区的原因是IE6在某些情况下不主动识别!important,以至于常常被人误用做识别IE6的hack。可是,大家注意一下,IE6只是在某些情况下不识别。

ie6下,同一个大括号里对同一个样式属性定义,其中一个加important 则important标记是被忽略的,例:

{
    background:red!important;
    background:green;
}

ie6下解释为背景色green,其它浏览器解释为背景色red;如果这同一个样式在不同大括号里定义,其中一个加important 则important发挥正常作用,例:

div{
    background:red!important;
} 
div{
    background:green;
}

这时所有浏览器统一解释为背景色red。

实例

<style type="text/css">
/***************** 各浏览器兼容CSS *****************/
    .bb{
        height:32px;
        background-color:#f1ee18;/*所有识别*/ 
        background-color:#00deff\9; /*IE6、7、8识别*/
        +background-color:#a200ff;/*IE6、7识别*/ 
        _background-color:#1e0bd1/*IE6识别*/
    } 

    @media screen and (-webkit-min-device-pixel-ratio:0){
        .bb{background-color:#f1ee18}
    } /* Safari(Chrome) 有效 */

    @media all and (min-width: 0px){ 
        .bb{
            background-color:#f1ee18;/*opera and Safari(Chrome) and firefox*/ 
            background-color:#4cac70\0;/* 仅 Opera 有效 */ 
        }
    } 

    .bb, x:-moz-any-link, x:default{background-color:#4eff00;/*IE7、Firefox3.5及以下 识别 */} 
    @-moz-document url-prefix(){.bb{background-color:#4eff00;/*仅 Firefox 识别 */}} 
    * +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */

    /* 一般情况下 我们区分IE7 只用 +background-color 配合 _background-color 就行了
     如果必须写 .bb, x:-moz-any-link, x:default 这样的代码区分 Firefox3.5及以下 
     则谨记此写法对IE7也有效,故在其中要再重写一次 +background-color 或者使用 * +html .bb{background-color:blue;} 方法仅对 IE7 有效。
     可使用 @-moz-document url-prefix(){} 方法独立区分所有 firefox */

    #firefoxTip, x:-moz-any-link, x:default{display:block;/*IE7 firefox3.5及以下 识别 */+display:none/*再区分一次IE7*/} 
    @-moz-document url-prefix(){#firefoxTip{display:block;/*仅 firefox 识别 */}} 
    #ChromeTip{display:none;} 
    @media screen and (-webkit-min-device-pixel-ratio:0){#ChromeTip{display:block;}} /* safari(Chrome) 有效 */ 
    @media all and (min-width: 0px){#ChromeTip{display:none\0;} /* 仅 Opera 有效 */ }
</style>

CSS Hack利弊

一般情况下,我们尽量避免使用CSS hack,但是有些情况为了顾及用户体验实现向下兼容,不得已才使用hack。比如由于IE8及以下版本不支持CSS3,而我们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染,这种情况下如果不使用css3pie或htc或条件注释等方法时,可能就得让IE8-的专属hack出马了。使用hack虽然对页面表现的一致性有好处,但过多的滥用会造成html文档混乱不堪,增加管理和维护的负担。

参考

  1. CSS hack大全
文章目录
  1. 1. 什么是CSS Hack
  2. 2. CSS Hack原理
  3. 3. CSS Hack分类
    1. 3.1. IE条件注释法
    2. 3.2. 属性前缀法
    3. 3.3. 选择器前缀法
  4. 4. CSS Hack书写顺序
  5. 5. !important
  6. 6. 实例
  7. 7. CSS Hack利弊
  8. 8. 参考