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