CSS中加號、星號及其他符號的作用

來源:互聯網
上載者:User

標籤:style   io   ar   color   使用   sp   strong   on   檔案   

     首先,什麼是CSS hack?
  針對不同的瀏覽器寫不同的CSS code的過程,就叫CSS hack!

  CSS hack由於不同的瀏覽器,比如Internet Explorer6,Internet Explorer 7,MozillaFirefox等,對CSS的解析認識不一樣,因此會導致產生的頁面效果不一樣,得不到我們所需要的頁面效果。
  這個時候我們就需要針對不同的瀏覽器去寫不同的CSS,讓它能夠同時相容不同的瀏覽器,能在不同的瀏覽器中也能得到我們想要的頁面效果。

CSS Hack的原理是什麼
  由於不同的瀏覽器對CSS的支援及解析結果不一樣,還由於CSS中的優先順序的關係。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。
  CSS Hack大致有3種表現形式,CSS類內部Hack、選取器Hack以及HTML頭部引用(if IE)Hack,CSSHack主要針對IE瀏覽器。
  類內部Hack:比如 IE6能識別底線"_"和星號" * ",IE7能識別星號" *",但不能識別底線"_",而firefox兩個都不能認識。
  選取器Hack:比如 IE6能識別*html .class{},IE7能識別*+html.class{}或者*:first-child+html .class{}。
  HTML頭部引用(if IE)Hack:針對所有IE:<!--[ifIE]><!--您的代碼--><![endif]-->,針對IE6及以下版本:<!--[iflt IE7]><!--您的代碼--><![endif]-->,這類Hack不僅對CSS生效,對寫在判斷語句裡面的所有代碼都會生效。
  書寫順序,一般是將識別能力強的瀏覽器的CSS寫在後面。下面如何寫裡面說得更詳細些。

如何寫CSS Hack
  比如要分辨IE6和firefox兩種瀏覽器,可以這樣寫:

<style>
   div{
   background:green;
   *background:red;
   }

</style>


  在IE6中看到是紅色的,在firefox中看到是綠色的。
  上面的css在firefox中,它是認識不了後面的那個帶星號的東東是什麼的,於是將它過濾掉,不予理睬,解析得到的結果是:div{background:green},於是理所當然這個div的背景是綠色的。
  在IE6中呢,它兩個background都能識別出來,它解析得到的結果是:div{background:green;background:red;},於是根據優先順序別,處在後面的red的優先順序高,於是當然這個div的背景顏色就是紅色的了。

在理想世界裡,正確的CSS應該在任何支援CSS的瀏覽器裡工作良好。不幸的是,我們並不是生活在理想的世界裡,瀏覽器們布滿了BUG和不一致。建立一個跨瀏覽器並且顯示一致的頁面,CSS開發人員必須想盡辦法。通過使用BUG和未實現的CSS,開發人員就能夠為不同的瀏覽器應用不同的規則。HACK和FILTER是開發人員強有力的武器。瞭解各種常用的HACKS以及它們如何工作,是件重要的事,但什麼時候用和什麼時候不用它們,也是件同等重要的事情。

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

  反斜線符號

  這種hack利用了一個在Mac平台上的IE的bug。以\*/結束的注釋在IEMac上是不正確關閉的,所以那些需要被忽略的語句可以放在這種注釋後面。

  

  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>bodyhack,是為Opera7.0以前瀏覽器,它也有這樣的解析錯誤,但幸好它支援子選取器,所以有這樣較簡單的方法。

  底線hack

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

  IE 6及以下的版本可以識別帶有底線首碼的屬性,而其它的瀏覽器會忽略它。因此,一個屬性前面加上底線或者連字號,就成為了IE6及以下版本瀏覽器的專有屬性。

  #elem {

  width: [W3C ModelWidth];

  _width: [BorderBoxModel];

  }

  這個hack使用了無效的CSS,利用了一個瀏覽器的bug,但是我們有有效CSS語句可以完成這樣的事情,所以這個HACK不推薦使用。

  星號hack

  (適用於IE7以下版本)

  除了底線和連字號,版本7及以下的IE可以識別以非字母字元為首碼的屬性,而其它瀏覽器會忽略。

  #elem {

  width: [W3C ModelWidth];

  *width: [BorderBoxModel];

  }

  這個HACK不推薦使用,原因同上面的底線HACK一樣。

  星號 HTML hack

  (適用於IE4-6)

  HTML元素是W3C標準DOM (Document ObjectModel)的根項目,但是IE 4至6的版本中還有一個神秘的父元素。完全相容的瀏覽器會忽略這個*html選取器,但IE4-6卻會對它正常處理。這樣就可以為這些版本的瀏覽器指定特別的規則。比如,這個規則可以特別指定IE4-6中的文字大小,但對其它瀏覽器不起作用。

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

  這個HACK使用了完全有效CSS。

  星號加號HACK

  (適用於IE7)

  雖然IE7不再識別以前的* htmlhack,但它使用了一個相似的新的hack。

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

  或者:

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

  此代碼只適用於IE7,不適用於其它任何瀏覽器。注意這個HACK只在IE7標準模型裡工作正常,在怪異模式下不能用。這個hack也被IE8的相容模式(相當於IE7的標準模式)所支援。和星號HTMLhack一樣,它也使用了有效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;

  }

  html:not([dummy]) .yourSelector{

  color: red;

  }

  這種否定選取器接受任何類型作為參數,屬性,通用,類或ID選取器,或者偽類。然後它會把後面的屬性應用於所有不匹配此文法的元素上。

  Body:empty hack

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

  :empty偽類,在CSS3中介紹過的,用於選擇不含任何內容的元素。然而,Geck0 1.8.1 和之後版本(應用在Firefox2.0.x及之後的版本)錯誤地選擇了body:empty 即使body元素包含有內容(一般情況都如此)。這樣我們可以向Firefox2.0x及以下版本提供專用的CSS規則。

  

  body:empty p {

  display:none;

  }

  此HACK使用有效CSS.

  !Important 怪僻

  (適用於IE8以下版本)

  IE8及以下版本有一些和!imporant有關的怪僻,它允許一個賦值優先順序更高。IE7及更早版本接受任一字元串替代important,並且會正常處理該值,而其它瀏覽器則會忽略。

  

  body {

  color: black;

  color: blue !ie;

  }

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

  body {

  color: black;

  color: blue!important!;

  }

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

  

  body {

  color: black!important;

  color: blue;

  }

  所有這些HACK使用的是有效CSS。

  動態屬性

  在版本5至7,IE曾支援過一種文法適用於動態變化的CSS屬性,有時被稱為CSS運算式。動態屬性通常混合其它HACK以補償更早版IE中不支援的屬性。

  div {

  min-height: 300px;

  

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

  }

  有條件的注釋

  有條件的注釋只在Windows平台的IE上被識別,並從IE5起開始支援,它甚至可以區分版本5.0,5.5和6.0。

  代碼:

  下面是一些“有條件的注釋”,可以顯示你正在使用的IE版本。如果你看不到,那麼你用的不是IE:

  <p><!--[ifIE]>

  According to the conditionalcomment this is Internet Explorer<br/>

  <![endif]-->

  <!--[if IE5]>

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

  <![endif]-->

  <!--[if IE5.0]>

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

  <![endif]-->

  <!--[if IE5.5]>

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

  <![endif]-->

  <!--[if IE6]>

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

  <![endif]-->

  <!--[if IE7]>

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

  <![endif]-->

  <!--[if gte IE5]>

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

  <![endif]-->

  <!--[if lt IE6]>

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

  <![endif]-->

  <!--[if lte IE5.5]>

  According to the conditionalcomment this is Internet Explorer lower or equal to5.5<br />

  <![endif]-->

  <!--[if gt IE6]>

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

  <![endif]-->

  </p>

  注意它的文法:

  - gt: 高於

  - lte:低於或相當

  說明:

  1.它們的基本結構和HTML注釋一樣(<!---->)。因此其它所有瀏覽器會把它們當作正常的注釋忽略掉。

  2.WindowsIE裡的程式可以識別這個特殊的<!--[ifIE]>文法,處理if並解析此注釋中的內容,就當作是正常的網頁內容一樣。

  3.既然“有條件的注釋”使用了HTML注釋的結構,它們就只能被包含在HTML檔案裡,而不是CSS檔案裡。你可以把整個<link>標籤放在“有條件的注釋”裡,指向一個指定的樣式表。如下所示:

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

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

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

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

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

  IE8 hack

  IE8不能識別“*”和“_”的csshack,所以我們可以使用"\9"來區分IE的各個版本。

  color:#0000FF\9; ;

  *color:#FFFF00;

  _color:#FF0000;

  小結

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

CSS中加號、星號及其他符號的作用

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

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.