IE6/IE7/IE8/FF全面相容的CSS HACK寫法

來源:互聯網
上載者:User

在使用DIV+CSS網頁布局中,CSS相容性問題一直困擾著大家,在瀏覽器安全色性未得到解決之前,同志們仍需努力;
IE6.0與Firefox之間的相容性解決方案比較容易,但後來出現了IE7,時隔不久微軟又發布了IE8,原來IE6、IE7的hack方法又不能用了,怎麼辦呢?
問題既然出現了,我們就要尋找解決的方法: 本文來自網頁之家www.51css.net

第一種方法: 本文來自網頁之家www.51css.net

微軟提供了這樣一個代碼: 本文來自網頁之家www.51css.net

 
  1. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

本文來自網頁之家www.51css.net

把這段代碼放到頁面<head>部分內,網頁在IE8裡面解析方式就會跟ie7一樣了,基本上可以無視ie8,剩下的只需解決IE6、IE7、Firefox之間的相容性就可以了

_background:#000; /* 只對ie6有效 */
*background:#ccc; /* 對ie7有效 */
background:#ffc; /*  對firefox有效*/

本文來自網頁之家www.51css.net

說明一下:

本文來自網頁之家www.51css.net

 

ie6三段都能認,但“_”這個只有ie6能識別;

本文來自網頁之家www.51css.net

 

ie7能識別“_”“*”;

本文來自網頁之家www.51css.net

 

firefox對加了“_”“*”的CSS樣式都不能識別; 本文來自網頁之家www.51css.net

IE8對於網頁頭部加了那段相容7的代碼的也沒,經過測試,在windos 7 測試版所帶的ie8是沒問題的,以後ie8正式版出來還管不管用就不知道了。 本文來自網頁之家www.51css.net

提示:如果你發現還是有問題的話,請查看一下你的html頁面頭部,看看<head>之前的內容是不是這樣的標準寫法 本文來自網頁之家www.51css.net

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
本文來自網頁之家www.51css.net

這個是現在比較規範的寫法,如果你是用dreamweaver做頁面的話,預設也是這種規範的,切記,非這種規範寫法的,相容性不能保證 本文來自網頁之家www.51css.net

第二種方法: 本文來自網頁之家www.51css.net

很多朋友是不願意在頁面頭部增加<meta http-equiv="x-ua-compatible" content="ie=7" />這樣一句代碼的,因為這樣需要每個頁面都得加。下面我們就介紹一種相容IE6/IE7/IE8/FF的寫法,注意下面的順序不可顛倒:

本文來自網頁之家www.51css.net

 

 
  1. margin-bottom:40px;       /*ff的屬性*/ 
  2. margin-bottom:140px\9;    /* IE6/7/8的屬性 */ 
  3. color:red\0;              /* IE8支援 */ 
  4. *margin-bottom:450px;     /*IE6/7的屬性*/ 
相關文章

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.