聊聊css hack

什么是CSS hack

CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

 

常用的CSS hack 有三种方式，CSS 内部hack、选择器hack、HTML 头部引用，其中第一种最常用。

 

一般我们的内部样式是这样写的：

<style type="text/css" >
    .test{
                background-color:green;
    }
   </style>

htm代码：

<div class="test" style="height:100px; width:100px; line-height:100px; margin:50px; border:1px solid #000;"></div>

结果应该是这样的：

在CSS3中常见一些这样的写法：

/*Mozilla内核浏览器：firefox3.5+*/
  -moz-transform: rotate | scale | skew | translate ;
 /*Webkit内核浏览器：Safari and Chrome*/
  -webkit-transform: rotate | scale | skew | translate ;
 /*Opera*/
  -o-transform: rotate | scale | skew | translate ;
 /*IE9*/
  -ms-transform: rotate | scale | skew | translate ;
 /*W3C标准*/
  transform: rotate | scale | skew | translate ;

这些都是根据浏览器的内核不同来写的。CSS3目前标准还没有统一，各个浏览器都有自己的表现方式，甚至有的实现，有的未实现，在前面加一些前缀以表示支持某个特定浏览器，这也是CSS 内部hack的基本原理。

目前还有很大部一部分人习惯还是用IE的浏览器，所以这一块市场还是要做的，这就导致了前端的工作量增多了不少。下面说说CSS 内部hack。

CSS 内部hack的语法 是 selector{<hack>?property:value<hack>?;} ，例如：

<style type="text/css" >
    .test{
               * background-color:green;
    }
</style>

在属性前面加个“*”这样的写法只会对IE6、7生效，其它版本IE及现代浏览器会忽略这条指令（没有特殊说明，本文所有hack都是指在声明了DOCTYPE的文档的效果）

<style type="text/css" >
    .test{
               - background-color:green;
    }
</style>

在属性前面有个“-”这样的只有IE6识别。

<style type="text/css" >
    .test{
               _background-color:green;
    }
</style>

在属性前面有个“_”这样的只有IE6识别。

<style>
    .test{
             *+background-color:pink;             
}
</style>

在属性前面有个“*+”这样的只有IE6,IE7能识别。

<style type="text/css" >
    .test{
               background-color:green!important;
    }
</style>

在属性值后面添加“!important”的写法只有IE6不能识别，其它版本IE及现代浏览器都可以识别。

还有\9,\0,\9\0。

<style type="text/css" >
    .test{
               background-color:green\9;
    }
</style>

在属性后面加“\9”的，在所有（IE6,IE7,IE8,IE9,IE10）下都可以显示。其他浏览器都不会显示。

<style type="text/css" >
    .test{
               background-color:green\0;
    }
</style>

在属性后面加“\0”的，在所有（IE8,IE9,IE10）下都可以显示。其他浏览器都不会显示。

<style type="text/css" >
    .test{
               background-color:green\9\0;
    }
</style>

在属性后面加“\9\0”的，在IE9,IE10下都可以显示。其他浏览器都不会显示。

以上是css hack 内部样式。

选择器hack

选择器hack最常见的三种情况分别是：*html,*+html,:root。还有其他的，如：

@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有效

 

*html是针对IE6显示的。

*+html是针对IE7显示的。

:root是针对IE9显示的。

如果你想针对IE7显示写，你可以像以下这样：

*+html #ie7test { /* IE7 only*/
    color:green;
}

 

如果你想针对IE9显示写，你可以像以下这样写：

：root .test{
   background:green;  
}

HTML头部引用

这是条件注释法，这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。举例如下：

<!--[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]-->

暂时先写到这里，后续再上。