標籤: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中加號、星號及其他符號的作用