浏览器兼容css-Hack写法汇总.doc

虽然和大家在学习各浏览器的Hack的写法，但我还是要说“Hack对于一位专业的前端攻程师来说并不是一样很好的东西，我力求处理浏览器兼容，尽量不使用Hack写法来处理，除非实在没有办法的情况下，再加以使用。”下面我们先来简单的了解一下什么是CSSHack。
Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSSCODE的过程，就叫CSSHACK，同时也叫写CSSHack。然后将Hack放在浏览器特定的CSS文件中，让其符合条件的浏览器解析这些代码，就如前面所说的条件样式，我们将CSSHack代码放入条件样式文件中，符合条件的浏览器就解析，不符合的将不解析，从面达到您所需要的页面渲染效果。总的一句话来说使用CSSHack将会使用你的CSS代码部分失去作用，然后借助条件样式，使用其原CSS代码在一些浏览器解析，而CSSHack代码在符合条件要求的浏览器中替代原CSS那部分代码。常见的就是在IE6下使用，不具体说，我想大家都有碰到过了。下面我们就一起来看看所有浏览器都具有什么Hack，换句话说，各种浏览器都能识别哪些CSS的写法。
下面是我收集有关于各浏览器下Hack的写法
1、Firefox
@-moz-documenturl-prefix(){
.selector{
property:value;
}
}
上面是仅仅被Firefox浏览器识别的写法，具体如：
@-moz-documenturl-prefix(){
.demo{
color:lime;
}
}
支持Firefox的还有几种写法：
/*支持所有firefox版本*/
#selector[id=selector]{property:value;}
或者：
@-moz-documenturl-prefix(){.selector{property:value;}}
/*支持所有Gecko内核的浏览器(包括Firefox)*/
*>.selector{property:value;}
2、Webkit枘核浏览器(chromeandsafari)
@mediascreenand(-webkit-min-device-pixel-ratio:0){
Selector{property:value;}
}
上面写法主要是针对Webkit内核的浏览器，如GoogleChrome和Safari浏览器：
@mediascreenand(-webkit-min-device-pixel-ratio:0){
.demo{color:#f36;}
}
3、Opera浏览器
html:first-child>bodySelector{property:value;}
或者：
@mediaalland(min-width:0){
Selector{property:value;}
}
或者：
@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){
head~bodySelector{property:value;}
}
上面则是Opera浏览器的Hack写法：
@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){
head~body.demo{background:green;}
}
4、IE9浏览器
:rootSelector{property:value9;}
上面是IE9的写法，具体应用如下：
:root.demo{color:#ff09;}
5、IE9以及IE9以下版本
Selector{property:value9;}
这种写法只有IE9以及IE9以下版本能识别，这里需要注意此处“9”只能是“9”不能是别的，比如说“8”，不然会失去效果的，如：
.demo{background:lime9;}
6、IE8浏览器
Selector{property:value/;}
或者：HYPERLINK"http://www.gzbsj.com"广州活动策划公司
@mediascreen{
Selector{property:value;}
}
上面写法只有IE能识别，如：
.color{color:#fff/;}
或者：
@mediascreen{
.color{color:#fff;}
}
7、IE8以及IE8以上的版本
Selector{property:value;}
这种写法只有IE8以及IE8以上版本支持，如
.demo{color:#ff0;}