在使用DIV+CSS網頁布局中,CSS相容性問題一直困擾著大家,在瀏覽器安全色性未得到解決之前,同志們仍需努力;
IE6.0與Firefox之間的相容性解決方案比較容易,但後來出現了IE7,時隔不久微軟又發布了IE8,原來IE6、IE7的hack方法又不能用了,怎麼辦呢?
問題既然出現了,我們就要尋找解決的方法: 本文來自網頁之家www.51css.net
第一種方法: 本文來自網頁之家www.51css.net
微軟提供了這樣一個代碼: 本文來自網頁之家www.51css.net
- <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
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <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
- margin-bottom:40px; /*ff的屬性*/
- margin-bottom:140px\9; /* IE6/7/8的屬性 */
- color:red\0; /* IE8支援 */
- *margin-bottom:450px; /*IE6/7的屬性*/