煮酒論英雄-CSS HACK 你不知道的那些事兒！

不少朋友搞不清楚CSS中有哪些HACK，怎麼使用，我翻譯+整理了一下貼在這裏。這篇文章是關於CSS的hacking技術。不要和微軟專有 的CSS屬性「濾鏡」混淆。

在 理想世界裏，正確的CSS應該在任何支持CSS的瀏覽器裏工做良好。不幸的是，咱們並非生活在理想的世界裏，瀏覽器們佈滿了BUG和不一 致。建立一個跨瀏覽器而且顯示一致的頁面，CSS開發者必須想盡辦法。經過使用BUG和未實現的CSS，開發者就可以爲不一樣的瀏覽器應用不一樣的規則。 HACK和FILTER是開發者強有力的武器。瞭解各類經常使用的HACKS以及它們如何工做，是件重要的事，但何時用和何時不用它們，也是件同等重 要的事情。

CSS filter或者hack是一種代碼，用來根據瀏覽器類型，版本號顯示或隱藏CSS標籤。瀏覽器們對CSS行爲有不一樣的解釋，對W3C標準的支持程度也不 相同。CSS 過濾器常常用於在多個瀏覽器中實現一致的佈局外觀，由於某些瀏覽器沒法渲染。HACK（黑客）這樣的稱呼多少有點消極，實質上屬於我的對CSS代碼非官方 的修改，誤導人們覺得還有更好的方法達到目的，但其實咱們沒有，有的人喜歡用patch（補丁）來稱呼它，這樣人們就能知道這本是瀏覽器形成的錯誤。

反斜線符號

這種hack利用了一個在Mac平臺上的IE的bug。以\*/結束的註釋在IE Mac上是不正確關閉的，因此那些須要被忽略的語句能夠放在這種註釋後面。

/* 在IE Mac上忽略下面的語句 \*/

selector { ...styles... }

/* 忽略結束 */

盒模型hack

(適用於IE6如下版本)

叫它「盒模型hack」是由於它常常被用於解決IE的盒模型錯誤，這個hack能夠爲IE和其它瀏覽器設置不一樣的屬性。（在版本6時，IE已經 修正了這個盒模型錯誤。）

#elem {

width: [IE 中的寬度];

voice-family: "\"}\"";

voice-family:inherit;

width: [其它瀏覽器中的寬度];

}

html>body #elem {

width:[其它瀏覽器中的寬度];

}

第 一個，把voice-family設置爲字符串"}"，可是IE的解析bug會把它看成一個反斜線加右括號。選擇voice-family是 由於它不會影響到頁面樣式。第二個規則，使用了html>body hack,是爲Opera7.0之前瀏覽器，它也有這樣的解析錯誤，但幸虧它支持子選擇器，因此有這樣較簡單的方法。

下劃線hack

(適用於IE6及其如下版本)

IE 6 及如下的版本能夠識別帶有下劃線前綴的屬性，而其它的瀏覽器會忽略它。所以，一個屬性前面加上下劃線或者連字符，就成爲了IE6及如下版本瀏覽器的專有屬 性。

#elem {

width: [W3C Model Width];

_width: [BorderBox Model];

}

這個hack使用了無效的CSS，利用了一個瀏覽器的bug，可是咱們有有效的CSS語句能夠完成這樣的事情，因此這個HACK不推薦使用。

星號hack

(適用於IE7如下版本)

除了下劃線和連字符，版本7及如下的IE能夠識別以非字母字符爲前綴的屬性，而其它瀏覽器會忽略。

#elem {

width: [W3C Model Width];

*width: [BorderBox Model];

}

這個HACK不推薦使用，緣由同上面的下劃線HACK同樣。

星號 HTML hack

(適用於IE4-6)

HTML 元素是W3C標準DOM (Document Object Model)的根元素，可是IE 4至6的版本中還有一個神祕的父元素。徹底兼容的瀏覽器會忽略這個* html選擇器，但IE4-6卻會對它正常處理。這樣就能夠爲這些版本的瀏覽器指定特別的規則。好比，這個規則能夠特別指定IE4-6中的文字大小，但對 其它瀏覽器不起做用。

* html p {font-size: 5em; }

這個HACK使用了徹底有效的CSS。

星號加號HACK

(適用於IE7)

雖然IE7再也不識別之前的* html hack，但它使用了一個類似的新的hack。

*:first-child+html p { font-size: 5em; }

或者：

*+html p { font-size: 5em; }

此代碼只適用於IE7，不適用於其它任何瀏覽器。注意這個HACK只在IE7標準模型裏工做正常，在怪異模式下不能用。這個hack也被IE8 的兼容模式（至關於IE7的標準模式）所支持。和星號HTML hack同樣，它也使用了有效的CSS。

子選擇器hack

(適用於IE6及如下版本)

IE6和早期的版本不支持「子選擇器」(>)，利用這個咱們能夠爲其它瀏覽器指定特別的規則。舉例來講，這個規則可讓段落文字在 firefox 變成藍色，但在IE7以前的版本里卻不能。

html > body p { color: blue; }

雖然IE7增長了對子選擇器的支持，但人們發現了新的hack能夠把IE7也排除。當一個空的註釋緊跟在子選擇器的後面重複的時候，IE7會不 識別後面的規則，就和較早版本的瀏覽器同樣。

html >/**/ body p { color: blue; }

否認僞類HACK

(可區分IE和非IE)

IE的全部版本都不支持CSS3 : not() 僞類。有一種變異的HACK使用 : root 僞類，此僞類也一樣不被IE識別。

.yourSelector {

color: black;

} /* IE中的值 */

html:not([dummy]) .yourSelector {

color: red;

} /* Safari, Opera and Firefox中的值 */

這種否認選擇器接受任何類型做爲參數，屬性，通用，類或ID選擇器，或者僞類。而後它會把後面的屬性應用於全部不匹配此語法的元素上。

Body:empty hack

(適用於Firefox 2.0及如下版本)

:empty 僞類，在CSS3中介紹過的，用於選擇不含任何內容的元素。然而，Geck0 1.8.1 和以後版本（應用在Firefox2.0.x 及以後的版本）錯誤地選擇了body:empty 即便body元素包含有內容（通常狀況都如此）。這樣咱們能夠向Firefox 2.0x及如下版本提供專用的CSS規則。

/* 讓 p 元素在 Firefox 2.0.x 及如下的版本中不顯示 */

body:empty p {

display:none;

}

此HACK使用有效的CSS.

！Important 怪僻

(適用於IE8如下版本)

IE8及如下版本有一些和!imporant有關的怪僻，它容許一個賦值優先級更高。IE7及更早版本接受任意字符串替代important， 而且會正常處理該值，而其它瀏覽器則會忽略。

/* 在IE8及如下版本下設文字爲藍色，其它瀏覽器中爲黑色 */

body {

color: black;

color: blue !ie;

}

類似地，IE8及更早版本接受在!important聲明後面的非字母符號，而其它瀏覽器會忽略它。

body {

color: black;

color: blue !important!;

}

IE6及如下版本有一個!important帶來的問題，當在同一段代碼塊中同一元素的同一屬性有了不一樣的值，本應結果是第二個值被第一個取 代，但IE6及更低版本並不這麼作。

/* 在IE6及更低版本中設文字爲藍色 */

body {

color: black !important;

color: blue;

}

全部這些HACK使用的是有效的CSS。

動態屬性

在版本5至7，IE曾支持過一種語法適用於動態變化的CSS屬性，有時被稱爲CSS表達式。動態屬性一般混合其它HACK以補償更早版IE中不 支持的屬性。

div {

min-height: 300px;

/* 在IE6中模擬 min-height */

_height: expression(document.body.clientHeight < 300 ? "300px" : "auto");

}

有條件的註釋

有條件的註釋只在Windows平臺的IE上被識別，並從IE5起開始支持，它甚至能夠區分版本5.0,5.5和6.0。

代碼：

下面是一些「有條件的註釋」，能夠顯示你正在使用的IE版本。若是你看不到，那麼你用的不是IE：

<p><!--[if IE]>

According to the conditional comment this is Internet Explorer<br />

<![endif]-->

<!--[if IE 5]>

According to the conditional comment this is Internet Explorer 5<br />

<![endif]-->

<!--[if IE 5.0]>

According to the conditional comment this is Internet Explorer 5.0<br />

<![endif]-->

<!--[if IE 5.5]>

According to the conditional comment this is Internet Explorer 5.5<br />

<![endif]-->

<!--[if IE 6]>

According to the conditional comment this is Internet Explorer 6<br />

<![endif]-->

<!--[if IE 7]>

According to the conditional comment this is Internet Explorer 7<br />

<![endif]-->

<!--[if gte IE 5]>

According to the conditional comment this is Internet Explorer 5 and up<br />

<![endif]-->

<!--[if lt IE 6]>

According to the conditional comment this is Internet Explorer lower than 6<br />

<![endif]-->

<!--[if lte IE 5.5]>

According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />

<![endif]-->

<!--[if gt IE 6]>

According to the conditional comment this is Internet Explorer greater than 6<br />

<![endif]-->

</p>

注意它的語法：

- gt: 高於

- lte:低於或至關

說明：

1.它們的基本結構和HTML註釋同樣(<!-- -->)。所以其它全部瀏覽器會把它們看成正常的註釋忽略掉。

2.Windows IE裏的程序能夠識別這個特殊的<!--[if IE]>語法，處理if並解析此註釋中的內容，就看成是正常的網頁內容同樣。

3.既然「有條件的註釋」使用了HTML註釋的結構，它們就只能被包含在HTML文件裏，而不是CSS文件裏。你能夠把整 個<link>標籤放在「有條件的註釋」裏，指向一個指定的樣式表。以下所示：

<link href="all_browsers.css" rel="stylesheet" type="text/css">

<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->

<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->

<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->

<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->

IE8 hack

IE8不能識別「*」和「_」的css hack，因此咱們可使用"\9"來區分IE的各個版本。

color:#0000FF\9; ; /*ie6,ie7,ie8*/

*color:#FFFF00; /*ie7*/

_color:#FF0000; /*ie6*/