1. 程式人生 > >怎麽用css hack處理各瀏覽器兼容IE6,IE7,IE8,IE9/ FF

怎麽用css hack處理各瀏覽器兼容IE6,IE7,IE8,IE9/ FF

過濾 提醒 fire 混亂 不一致 rst 位置 兼容性問題 sina

第一:什麽事瀏覽器兼容性

  瀏覽器兼容性問題又被稱為網頁兼容性或網站兼容性問題,指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的兼容問題。在網站的設計和制作中,做好瀏覽器兼容,才能夠讓網站在不同的瀏覽器下都正常顯示。而對於瀏覽器軟件的開發和設計,瀏覽器對標準的更好兼容能夠給用戶更好的使用體驗。這個大家都深有體會就不多解釋了

第二:出現瀏覽器不兼容的原因是什麽

  因為不同瀏覽器使用內核及所支持的HTML等網頁語言標準不同(各瀏覽器都有自身的HTML標簽樣式定義);以及用戶客戶端的環境不同(如分辨率不同)造成的顯示效果不能達到理想效果。最常見的問題就是網頁元素位置混亂,錯位。

第二:什麽是css hack

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

第三:CSS Hack的原理是什麽

  由於不同的瀏覽器對CSS的支持及解析結果不一樣,還由於CSS中的優先級的關系。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。  

  CSS Hack大致有3種表現形式,CSS類內部Hack、選擇器Hack以及HTML頭部引用(if IE)Hack,CSS Hack主要針對IE瀏覽器。   

  類內部Hack:比如 IE6能識別下劃線"_"和星號" * ",IE7能識別星號" * ",但不能識別下劃線"_",而firefox兩個都不能認識。

  選擇器Hack:比如 IE6能識別*html .class{},IE7能識別*+html .class{}或者*:first-child+html .class{}。

  HTML頭部引用(if IE)Hack:針對所有IE:<!--[if IE]><!--您的代碼--><![endif]-->,針對IE6及以下版本:<!--[if lt IE 7]><!--您的代碼--><![endif]-->,這類Hack不僅對CSS生效,對寫在判斷語句裏面的所有代碼都會生效。  

 書寫順序,一般是將識別能力強的瀏覽器的CSS寫在前面。下面如何寫裏面說得更詳細些。

  現在大家對瀏覽器兼容性一些理論都有一些認知了,下面重點講解css hack寫法

  所有瀏覽器 通用 height: 100px;

  IE專用 height:100px\9;

  IE6專用 _height: 100px;

  IE6IE7專用 *height:100px;

  IE7專用 *+height: 100px;

  IE8專用 height:100\0;

   IE7、IE8、FF 共用 height: 100px!important;

因為css樣式有優先級,在寫css hack時候也要講究順序,請看下面例子

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

background:green; /* for firefox */   

*background:red; /* for IE6 */ (both IE6 && IE7)

我在IE6中看到是紅色的,在firefox中看到是綠色的。   

解釋一下:   

上面的css在firefox中,它是認識不了後面的那個帶星號的東東是什麽的,於是將它過濾掉,不予理睬,解析得到的結果是:div{background:green},於是理所當然這個div的背景是綠色的。   

在IE6中呢,它兩個background都能識別出來,它解析得到的結果是:div{background:green;background:red;},於是根據優先級別,處在後面的red的優先級高,於是當然這個div的背景顏色就是紅色的了。

二、css hack:怎麽區分IE6,IE7,firefox呢?

下面我將分層次的講解兩兩之間的用法在說三者一起css hack怎麽寫

①區別IE6與FF

background:red;/*FF aiin.sinaapp.com*/

*background:blue;/*IE6 aiin.sinaapp.com*/

②區別IE6與IE7(因為*對IE6和IE7都支持那麽就要考慮順序的問題的了)

*background:blue;/*IE6和IE7*/

_background:yellow;/*IE6 aiin.sinaapp.com*/

IE7背景是藍色,由於IE6背景開始藍色最後是黃色,CSS樣式都是以最後為標準的所以IE6背景是黃色。

③區別IE7與FF(方法和①一樣)

④區別FF,IE7,IE6三者

background:red;/*FF*/

*background:blue;/*IE7*/

_background:yellow;/*IE6*/

好了現在大家應該能理解三者的用法了!

提醒:IE都能識別*;標準瀏覽器(如FF)不能識別*;IE6能識別*,某些情況下不能識別 !important

  瀏覽器優先級別:FF<IE7<IE6,CSS hack書寫順序一般為FF IE7 IE6

怎麽用css hack處理各瀏覽器兼容IE6,IE7,IE8,IE9/ FF