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 hackIE8不能識別“*”和“_”的css hack，所以我們可以使用"\9"來區分IE的各個版本。color:#0000FF\9; ; /*ie6,ie7,ie8*/*color:#FFFF00; /*ie7*/_color:#FF0000; /*ie6*/