CSS hack方式

1、css hack是什么？

百度百科是这样解释的：CSS hack是因为不一样厂商的浏览器，好比IE,Safari,Firefox,Chrome,opera等，或者是同一厂商的浏览器的不一样版本，如IE6和IE7，它们对CSS的解析认识不彻底同样，所以会致使生成的页面效果不同，得不到咱们所须要的页面效果。这个时候咱们就须要针对不一样的浏览器去写不一样的CSS，让它可以同时兼容不一样的浏览器，能在不一样的浏览器中也能获得咱们想要的页面效果。简单的说，CSS hack的目的就是使你的CSS代码兼容不一样的浏览器。固然，咱们也能够反过来利用CSS hack为不一样版本的浏览器定制编写不一样的CSS效果。

2、原理

因为不一样的浏览器和浏览器各版本对CSS的支持及解析结果不同，以及CSS优先级对浏览器展示效果的影响，咱们能够据此针对不一样的浏览器情景来应用不一样的CSS样式。

3、分类

CSS Hack大体有3种表现形式：CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不一样版本之间的表现差别而引入的。

• 属性前缀法(即css类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox对于前述三个都不能识别等等。
• 选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
• IE条件注释法(即HTML条件注释Hack)：针对全部IE(注：IE10+已经再也不支持条件注释)： <!--[if IE]>IE浏览器显示的内容 <![endif]-->，针对IE6及如下版本： <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不只对CSS生效，对写在判断语句里面的全部代码都会生效。

上面一大串内容说得太官方，简单地说：CSS hack 经常使用的方式有三种，CSS 内部hack、选择器hack、HTML 头部引用，其中 CSS 内部hack 最经常使用。注意一点就是：CSS hack的书写顺序通常是先将适用范围广、被识别能力强的CSS定义在前面，把一些特殊的，范围小的CSS定义在后面，好比，firefox写在IE7前面，而IE7写在IE6前面以此类推。

CSS 内部 hack

因为CSS 内部 hack 最为经常使用，故先讲一下：

CSS 内部 hack 语法是这样的 selector{<hack>?property:value<hack>?;}，好比：

-background-color:green;

在css属性前面加上“-”，这样这条属性就只有IE6能识别，固然还有加“*”，则IE6/7能识别；还有些是写在属性后面的：

background-color:green\9;

在后面加上“\9”，这样只有IE浏览器能识别，而加上“\9\0”则只有IE9/10能识别，以此类推！

仍是看图比较直观，这里我用Bootstrap弄个简单的表格来展现一下：

OK，根据CSS hack 的书写顺序，这里举个例子：

div{
        width: 300px;
        height: 300px;
        background-color: red;              /*全部浏览器*/
        background-color: blue\9;        /*全部IE（IE6+）*/
        background-color: green\0;      /*IE8 */
        +background-color: pink;          /*IE7*/
        _background-color: orange;      /*IE6*/
 }

若是要区分标准模式下IE6~IE10和Opera/Firefox/Chrome的hack，这里有个例子很详细：

IE6显示为：橘色，
IE7显示为：粉色，
IE8显示为：黄色，
IE9显示为：紫色，
IE10显示为：绿色，
Firefox显示为：蓝色，
Opera显示为：黑色，
Safari/Chrome显示为：灰色。  请注意书写顺序！

.hacktest{ 
      background-color:blue;      /* 都识别，此处针对firefox */
      background-color:red\9;      /*all ie*/
      background-color:yellow\0;    /*for IE8/IE9/10 最新版opera也认识*/
     +background-color:pink;        /*for ie6/7*/
     _background-color:orange;       /*for ie6*/
}

@media screen and (min-width:0){ 
     .hacktest {background-color:black\0;}  /*opera*/
} 
@media screen and (min-width:0) { 
     .hacktest { background-color:purple\9; }/*  for IE9/IE10  PS:国外有些习惯常写做\0，根本没考虑Opera也认识\0的实际 */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
     .hacktest { background-color:green; } /* for IE10+ 此写法能够适配到高对比度和默认模式，故可覆盖全部ie10的模式 */
}
@media screen and (-webkit-min-device-pixel-ratio:0){
                 .hacktest {background-color:gray;}    /*for Chrome/Safari*/
 }  

/* #963棕色 :root is for IE9/IE10, 优先级高于@media, 慎用！若是两者合用，必要时在@media样式加入 !important 才能区分IE9和IE10 */
/*
:root .hacktest { background-color:#963\9; } 
*/

选择器 hack

选择器hack其实主要是针对IE浏览器，不经常使用，经常使用如表：

例如：

:root .test
{
           background-color:green;    /* IE9 */
}

HTML头部引用

这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式，在非IE浏览器下则当作注释视而不见。

<!--[if IE]>
       这段文字只在IE浏览器显示
<![endif]-->
    
<!--[if IE 6]>
       这段文字只在IE6浏览器显示
<![endif]-->
    
<!--[if gte IE 6]>
      这段文字只在IE6及以上版本IE浏览器显示
<![endif]-->
    
<!--[if ! IE 8]>
        这段文字在非IE8浏览器显示
<![endif]-->

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

注意点：

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt ：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

! ：就是不等于的意思。

 

PS：学习了CSS hack的各类技巧，不过最重要的仍是要注意书写顺序，若是顺序写错了，就达不到咱们想要的效果了哦！固然，除非实际项目须要，通常仍是尽可能避免使用CSS hack ！

 

参考：http://www.cnblogs.com/dolphinX/p/3292630.html

参考：http://blog.csdn.net/freshlover/article/details/12132801