瀏覽器兼容之旅第二站:各瀏覽器的Hack寫法讓瀏覽器達(dá)到一致的渲染效果

發(fā)布時(shí)間：2012-12-27 12:48:34 作者：佚名

Hack是針對(duì)不同的瀏覽器去寫不同的CSS樣式，從而讓各瀏覽器能達(dá)到一致的渲染效果，那么針對(duì)不同的瀏覽器寫不同的CSS CODE的過程，就叫CSS HACK，同時(shí)也叫寫CSS Hack這一節(jié)將和大家一起學(xué)習(xí)：瀏覽器兼容之旅的第二站:各瀏覽器的Hack寫法

前面一節(jié)《瀏覽器兼容之旅的第一站:如何創(chuàng)建條件樣式》和大家一起探討了如何創(chuàng)建條件樣式，了解和學(xué)習(xí)了創(chuàng)建IE條件樣式的方法以及他們所起的作用，特別是知道了條件注釋所起的作用。那么這一節(jié)將和大家一起學(xué)習(xí)：瀏覽器兼容之旅的第二站:各瀏覽器的Hack寫法

雖然和大家在一起學(xué)習(xí)各瀏覽器的Hack的寫法，但我還是要說“Hack對(duì)于一位專業(yè)的前端攻程師來說并不是一樣很好的東西，我力求處理瀏覽器兼容，盡量不使用Hack寫法來處理，除非實(shí)在沒有辦法的情況下，再加以使用。”下面我們先來簡單的了解一下什么是CSS Hack。

Hack是針對(duì)不同的瀏覽器去寫不同的CSS樣式，從而讓各瀏覽器能達(dá)到一致的渲染效果，那么針對(duì)不同的瀏覽器寫不同的CSS CODE的過程，就叫CSS HACK，同時(shí)也叫寫CSS Hack。然后將Hack放在瀏覽器特定的CSS文件中，讓其符合條件的瀏覽器解析這些代碼，就如前面所說的條件樣式，我們將CSS Hack代碼放入條件樣式文件中，符合條件的瀏覽器就解析，不符合的將不解析，從面達(dá)到您所需要的頁面渲染效果?？偟囊痪湓拋碚f 使用CSS Hack將會(huì)使用你的CSS代碼部分失去作用，然后借助條件樣式，使用其原CSS代碼在一些瀏覽器解析，而CSS Hack代碼在符合條件要求的瀏覽器中替代原CSS那部分代碼。常見的就是在IE6下使用，不具體說，我想大家都有碰到過了。下面我們就一起來看看所有瀏覽器都具有什么Hack，換句話說，各種瀏覽器都能識(shí)別哪些CSS的寫法。

下面是我收集有關(guān)于各瀏覽器下Hack的寫法
1、Firefox

復(fù)制代碼

代碼如下:

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

上面是僅僅被Firefox瀏覽器識(shí)別的寫法，具體如：

復(fù)制代碼

代碼如下:

@-moz-document url-prefix() {
.demo {
color:lime;
}
}

支持Firefox的還有幾種寫法：

復(fù)制代碼

代碼如下:

/* 支持所有firefox版本 */
#selector[id=selector] { property: value; }
或者：
@-moz-document url-prefix() { .selector { property: value; } }
/* 支持所有Gecko內(nèi)核的瀏覽器 (包括Firefox) */
* >.selector { property: value; }

2、Webkit枘核瀏覽器(chrome and safari)

復(fù)制代碼

代碼如下:

@media screen and (-webkit-min-device-pixel-ratio:0) {
Selector { property: value; }
}

上面寫法主要是針對(duì)Webkit內(nèi)核的瀏覽器，如Google Chrome 和 Safari瀏覽器：

復(fù)制代碼

代碼如下:

@media screen and (-webkit-min-device-pixel-ratio:0) {
.demo { color: #f36; }
}

3、Opera瀏覽器

復(fù)制代碼

代碼如下:

html:first-child>b\ody 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寫法：

復(fù)制代碼

代碼如下:

@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瀏覽器

復(fù)制代碼

代碼如下:

:root Selector {property: value\9;}

上面是IE9的寫法，具體應(yīng)用如下：

復(fù)制代碼

代碼如下:

:root .demo {color: #ff0\9;}

5、IE9以及IE9以下版本

復(fù)制代碼

代碼如下:

Selector {property:value\9;}

這種寫法只有IE9以及IE9以下版本能識(shí)別，這里需要注意此處“\9”只能是“\9”不能是別的，比如說“\8”，不然會(huì)失去效果的，如：

復(fù)制代碼

代碼如下:

.demo {background: lime\9;}

6、IE8瀏覽器

復(fù)制代碼

代碼如下:

Selector {property: value/;}
或者：
@media \0screen{
Selector {property: value;}
}

上面寫法只有IE能識(shí)別，如：

復(fù)制代碼

代碼如下:

.color {color: #fff/;}
或者：
@media \0screen{
.color {color: #fff;}
}

7、IE8以及IE8以上的版本

復(fù)制代碼

代碼如下:

Selector {property: value\0;}

這種寫法只有IE8以及IE8以上版本支持，如

復(fù)制代碼

代碼如下:

.demo {color: #ff0\0;}

8、IE7瀏覽器

復(fù)制代碼

代碼如下:

*+html Selector{property:value;}
或
*:first-child+html Selector {property:value;}

上面兩種是IE7瀏覽器下才能識(shí)別，如：

復(fù)制代碼

代碼如下:

*+html .demo {background: green;}
或者：
*:first-child+html .demo {background: green;}

9、IE7及IE7以下版本瀏覽器

復(fù)制代碼

代碼如下:

Selector {*property: value;}

上面的寫法在IE7以及其以下版本都可以識(shí)別，如：

復(fù)制代碼

代碼如下:

.demo {*background: red;}

10、IE6瀏覽器

復(fù)制代碼

代碼如下:

Selector {_property/**/:/**/value;}
或者：
Selector {_property: value;}
或者：
*html Selector {property: value;}

具體應(yīng)用如下：

復(fù)制代碼

代碼如下:

.demo {_width/**/:/**/100px;}
或者：
.demo {_width: 100px;}
或者：
*html .demo {width: 100px;}

上面具體介紹了各種版本瀏覽器下如何識(shí)別各種的Hack寫法，包括了IE6-9以及現(xiàn)代版本的瀏覽器寫法。綜合上面的所述，我們針對(duì)不同瀏覽器的Hack寫法主要分為兩種
從CSS選擇器和CSS屬性上來區(qū)別不同的Hack寫法。下面我們分別來看這兩種的不同寫法：

CSS選擇器的Hack寫法
下面我們主要來看CSS選擇器和CSS屬性選擇器在不同瀏覽器的支持情況。下面先來看CSS選擇器支持情況。

CSS選擇器的Hack寫法
1、IE6以及IE6以下版本瀏覽器

復(fù)制代碼

代碼如下:

* html .demo {color: green;}

2、僅僅IE7瀏覽器

復(fù)制代碼

代碼如下:

*:first-child+html .demo {color: green;}

3、除IE6之外的所有瀏覽器（IE7-9, Firefox,Safari,Opera）

復(fù)制代碼

代碼如下:

html>body .demo {color: green;}

4、IE8-9,Firefox,Safari,Opear

復(fù)制代碼

代碼如下:

html>/**/body .demo {color: green;}

5、IE9+

復(fù)制代碼

代碼如下:

:root .demo {color: red;}

6、Firefox瀏覽器

復(fù)制代碼

代碼如下:

@-moz-document url-prefix() {
.demo {
color: red;
}
}

6、Webkit內(nèi)核瀏覽器（Safari和Google Chrome）

復(fù)制代碼

代碼如下:

@media screen and (-webkit-min-device-pixel-ratio:0) {
.demo { color: red; }
}

7、Opera瀏覽器

復(fù)制代碼

代碼如下:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body .demo { color: red; }
}

8、iPhone / mobile webkit

復(fù)制代碼

代碼如下:

@media screen and (max-device-width: 480px) {
.demo { color: red }
}

CSS屬性Hack寫法
1、IE6瀏覽器

復(fù)制代碼

代碼如下:

.demo {_color: red;}

2、IE6-7瀏覽器識(shí)別

復(fù)制代碼

代碼如下:

.demo {*color: red;}

3、所有瀏覽器除IE6瀏覽外

復(fù)制代碼

代碼如下:

.demo {color/**/:red;}

4、IE6-9瀏覽器

復(fù)制代碼

代碼如下:

.demo {color: red\9;}

5、IE7-8瀏覽器

復(fù)制代碼

代碼如下:

.demo {color/*\**/:red\9;}

上面羅列的都是各種瀏覽器下的有關(guān)于CSS的Hack的寫法，基中有針對(duì)于現(xiàn)代瀏覽器Safari,Google Chrome和Firefox的寫法，而且也有針對(duì)于我們前端人員最討厭的IE6-9的各版本瀏覽器的Hack的寫法，而且這些Hack我們又分為CSS選擇器的Hack寫法和CSS屬性的Hack寫法。然而具體何種適用，大家可以要據(jù)自己的需求來定，下面列出我個(gè)人的兩種寫法：

一、經(jīng)濟(jì)實(shí)惠型定法：
這種寫法注重單獨(dú)的CSS的Hack寫法。不同的瀏覽器使用不同的Hack寫法，其實(shí)也只是以IE的Hack寫法比較多（因?yàn)槲覀儗慔ack也主要是針對(duì)IE的瀏覽器）特別是IE6下的瀏覽器。單獨(dú)為各種瀏覽器寫Hack的好處是：針對(duì)各種瀏覽順的Hack寫法省力易記。因?yàn)槠渌臑g覽器主要是針對(duì)現(xiàn)代瀏覽器，相對(duì)來說是比較少的。針對(duì)于這種Hack的使用，我推薦使用下面的方法：

復(fù)制代碼

代碼如下:

.demo {
color: red;/*所有現(xiàn)代瀏覽器*/
color: green\9;/*所有IE瀏覽器*/
color: lime\0;/*IE8-9瀏覽器*/
*color: red;/*IE6-7瀏覽器*/
+color: blue;/*IE7瀏覽器*/
_color: orange;/*IE6瀏覽器*/
}
@media all and (min-width:0px){
color: #000;/*Webkit和Opera瀏覽器*/
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
color: #f36;/*Webkit內(nèi)核瀏覽器*/
}
@media all and (-wekit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body .demo {color: #369;} /*Opera*/
}
@-moz-document url-prefix(){
.demo{color:#ccc;}/* all firefox */
}

二、完美主義寫法
這種方法是追求完美主義的寫法，主要是配合我們上一節(jié)所說的IE條件注釋，全部采用選擇器Hack的寫法。這種寫法分兩步：
1、創(chuàng)建條件樣式表，并在HTML中body里添加相應(yīng)的class類名：

復(fù)制代碼

代碼如下:

2、接著創(chuàng)建對(duì)應(yīng)的樣式

復(fù)制代碼

代碼如下:

.demo {color: blue;}/*現(xiàn)代瀏覽器*/
.non-ie .demo {color: red;}/*除IE外瀏覽器*/
.ie9 .demo {color: yellow;}/*IE9瀏覽器*/
.ie8 .demo{color: green;}/*IE8瀏覽器*/
.ie7 .demo {color: orange;}/*IE7瀏覽器*/
.ie6 .demo {color: lime;}/*IE6瀏覽器*/
@media all and (min-width: 0px){
.demo {color:black;} /* webkit and opera */
}
@media screen and (-webkit-min-device-pixel-ratio:0){
.demo{color:#369;}/* webkit */
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body .demo{color:#cf6;}/* opera */
}
@-moz-document url-prefix(){
.demo{color:#963;}/* firefox * /
}

上面就是目前各種瀏覽器下，相關(guān)CSS的Hack的寫法，下面我們具體來看一個(gè)實(shí)例：
HTML Markup

復(fù)制代碼

代碼如下:

<div class="demo" >test color </div>
CSS Code
.demo {
color: red;/*所有現(xiàn)代瀏覽器*/
color: green\9;/*所有IE瀏覽器*/
color: lime\0;/*IE8-9瀏覽器*/
*color: red;/*IE6-7瀏覽器*/
+color: blue;/*IE7瀏覽器*/
_color: orange;/*IE6瀏覽器*/
}
:root .demo {color: #963\9;}
@-moz-document url-prefix(){
.demo{color:#897;}/* all firefox */
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.demo { color: #000; }/*webkit*/
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body .demo { color: red; }/*opera*/
}

請(qǐng)看最終效果圖：

下面羅列了各瀏覽器下的Hack的寫法，大家寫瀏覽的CSS Hack時(shí)也可以參考下面的圖表

注：上圖要是看不清楚，可以點(diǎn)擊鼠標(biāo)右鍵，將圖片保存到本地后瀏覽，效果會(huì)更佳。上圖也可以前往centricle.com在線查看。
那么到此就介紹完了有關(guān)于各瀏覽器的CSS Hack的寫法，大家在平時(shí)需要使用Hack時(shí)可以根據(jù)CSS的選擇器Hack和CSS的屬性Hack對(duì)號(hào)入坐，不過我還是強(qiáng)調(diào) 在Web頁面制作中盡量不要使用CSS Hack來處理兼容問題。因?yàn)槿魏螢g覽器下出現(xiàn)渲染不一致都極有可能是我們自己的結(jié)構(gòu)或樣式不符合W3C的某些要求，或者說違背了瀏覽器的某些規(guī)則而先造成的，所以我們應(yīng)該盡量通過結(jié)構(gòu)或CSS的修改來達(dá)到各瀏覽器渲染一致效果，除非到了萬不得已情況下，才考慮CSS的Hack。