轉載css 用法

 文章出自：http://www.zgxmwjjg.com

　很多朋友搞不清楚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*/

　　小結

　　使用HACK隱藏代碼在瀏覽器更新時經常會導致頁面不正常顯示。許多HACK曾用於在IE6及更低版本中隱藏CSS，但在版本7下不再工作，因為IE改進了對CSS 標準的支援。微軟的IE開發小組曾要求人們使用有條件的注釋，代替使用hack。