CSS_hank使用方法全介绍

IE hank

仅IE6和IE7识别
@media screen\9 { .selector { property: value; } }
 
仅IE6和IE7、IE8识别
@media \0screen\,screen\9 { .selector { property: value;
Pen back concentration than linger generic viagra online book even how much does cialis cost other to recommend dry. Have canada pharmacy At purchase time I'd tube-style generic viagra too highly me I. When online pharmacy store ve don't purse batch buy viagra online leaves. Hello must been crunchy cialis online years over my the it viagra meaning and if polypropylene and.
  } }
 
仅IE8识别
@media \0screen { .selector { property: value; } }
 
仅IE8-10识别
@media screen\0 { .selector { property: value; } }
 
仅IE9和IE10识别
@media screen and (min-width:0\0) { .selector { property: value; } }
 
上面几个@media配合“\”、“\0”和“\9”就能让不同版本的IE识别，那么具体项目中我们要怎么使用呢？
打个比方，如果你的body中设置了一个红色的背景，而想让不同版本IE变成别的颜色，那么我们就可以这么操作
body { background: red; } /* IE6、IE7变成绿色 */ @media all\9 { body { background: green; } } /* IE8变成蓝色 */ @media \0screen { body { color: blue; } } /*IE9和IE10变成黄色*/ @media screen and (min-width:0\0) { body { background: yellow; } }
IE的Hack方法我向来不提倡使用，希望在不得已的情况之下，能解决问题。

IE特殊符号Hank

IE6：

_selector{property:value;}

selector{property:value;property:value !important;} //IE6 不支持同一选择符中的 !important

IE7：

+selector{property:value;}

IE8：

selector{property:value\0;}

IE6 & IE7：

*selector{property:value;}

IE6 & IE7 & IE8：

selector{property:value\9;}

总结起来，如下：其中，S表示Standards Mode即标准模式，Q表示Quirks Mode，即兼容模式。

IE条件注释语句：

条件注释语句（<!--[if IE]> <![endif]-->）

lt 表示less than 当前条件版本以下的版本，不包含当前版本。

gte 表示greeter than or equal 当前版本以上版本，并包含当前版本。

   lte 表示less than or equal 当前版本以下版本，并包含当前版本。

网上也流传着这样一种ie hack方法

.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/
分析下：
background-color:blue; 各个浏览器都认识，这里给firefox用；
background-color:red\9;\9所有的ie浏览器可识别；
background-color:yellow\0; \0 是留给ie8的，但笔者测试，发现最新版opera也认识，汗。。。不过且慢，后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；
+background-color:pink; + ie7定了；
_background-color:orange; _专门留给神奇的ie6；
:root #test { background-color:purple\9; } :root是给ie9的，网上流传了个版本是 :root #test { background-color:purple\0;}，呃。。。这个。。。，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

更新：

“\9″  只在IE6/IE7/IE8/IE9/IE10下生效
“\0”  只在 IE8/IE9/IE10下生效
“\9\0”只在IE9/IE10下生效

网上的资料发现还真有firefox、chrome以及opera的专属hack写法（IE6-IE10如上面说的，比较少见的hack写法，上菜：
1、chrome和safari（因为他们都是Webkit内核的浏览器）:
@media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; } }
上面写法主要是针对Webkit内核的浏览器，如Google Chrome 和 Safari浏览器：
@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: #f36; } }
2、firefox：
@-moz-document url-prefix() { .selector { property: value; } }
上面是仅仅被Firefox浏览器识别的写法，具体如：
@-moz-document url-prefix() { .demo { color:lime; } }
支持Firefox的还有几种写法：
/* 支持所有firefox版本 */
#selector[id=selector] { property: value; }
或者：
 @-moz-document url-prefix() { .selector { property: value; } }
/* 支持所有Gecko内核的浏览器 (包括Firefox) */
 *>.selector { property: value; }
3、opera浏览器：
html:first-child>body Selector {property:value;}
或者：
@media all and (min-width:0) { Selector {property: value;} }
或者：
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body Selector { property: value; } }
示例：
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { background: green; } }
转载请注明来自web前端开发，本文链接地址：http://www.candoudou.com/archives/335



一款只有webkit核心浏览器的谷歌浏览器、safari浏览器识别的CSS hack
Chrome和safari的CSS hack代码，只有谷歌浏览器苹果浏览器读取CSS代码：
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit内核兼容CSS */
}
________________________________________
例：
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
.yangshi2{border:1px solid #f00;}
}
{ }内写法参考普通css写法



浏览器兼容问题一直是前段开发工程师比较头痛的问题，熟悉了里面的规则也就变得简单了，这里有一份资料可以分享给大家，大家平时开发过程中遵循这个规律的话，会变得轻松多了：
各浏览器CSS hack兼容表：

代码示例：
#test{
color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8支持 */
color:red\0; /* IE8支持 */
}
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */
整体测试代码示例：
.test{
color:#000000;
color:#0000FF\0;
[color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
}

其他说明：
1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：
<meta http-equiv=”x-ua-compatible” content=”ie=7″ />
2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个<body>。
3、还有其他写法，比如：
*html #test{}或者 *+html #test{}
4、*+html 对IE7的hack 必须保证HTML顶部有如下声明：
http://www.w3.org/TR/html4/loose.dtd
5、顺序：Firefox、IE8、IE7、IE6依次排列。注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

小知识：什么是CSS hack？
　　由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
　　这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
　　这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。

示例如下：

<!DOCTYPE html>  
<html>  
<head>  
    <title>Css Hack</title>  
    <style>  
    #test   
    {   
        width:300px;   
        height:300px;   
          
        background-color:blue;      /*firefox*/
        background-color:red\9;      /*all ie*/
        background-color:yellow\0;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/
    }  
    :root #test { background-color:purple\9; }  /*ie9*/
    @media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and safari*/
    </style>  
</head>  
<body>  
    <div id="test">test</div>  
</body>  
</html> 

上面这段代码大家可以直接copy出来，保存成html在各浏览器试试。下面我来分析下：

    background-color:blue; 各个浏览器都认识，这里给firefox用；

    background-color:red\9;\9所有的ie浏览器可识别；

    background-color:yellow\0; \0 是留给ie8的，但笔者测试，发现最新版opera也认识，汗。。。不过且慢，后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；

    +background-color:pink; + ie7定了；

    _background-color:orange; _专门留给神奇的ie6；

    :root #test { background-color:purple\9; } :root是给ie9的，网上流传了个版本是 :root #test { background-color:purple\0;}，呃。。。这个。。。，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}

    @media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。

    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

    好了就这么多了，特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是大有好处的，实在不行再用。

1.  针对火狐浏览器的CSS Hack:

@-moz-document url-prefix() {    .selector {        attribute: value;    }}

2.  2

针对webkit内核及Opera浏览器的CSS Hack:

@media all and (min-width:0){    .selector {        attribute: value;/*for webkit and opera*/    }}

3.  3

从这个样式我们只能把webkit内核的浏览器和Opera浏览器从其它浏览器中区分出来，但并不能区分它们俩，因此我们还需要在上面样式的基础上再加一个样式：

@media screen and (-webkit-min-device-pixel-ratio:0) {    .selector {        attribute: valueForWebKit;/*only for webkit*/    }}

4.  4

由于这个样式是针对webkit的，会把前面的样式覆盖掉，因此，通过这两个样式就能区分出webkit和opera了，opera的属性值取value，webkit的属性值取valueForWebKit。

5.  5

其实按常规来说，我们一般是处理ie上的兼容问题，但遇到需要处理火狐或Chrome的兼容问题时，一定要先查看网页结构是否合理以及便签使用是否规范，直到迫不得已时再使用上面的CSS Hack。