css hack比較全

來源:互聯網
上載者:User
很多朋友搞不清楚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*/
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.