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

雖然和大家在一起學習各瀏覽器的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

@-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; }

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


@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; }
}

3、Opera瀏覽器

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) {