瀏覽器兼容解決FF/IE6/IE7背景專用CSSHACK_經驗交流

來源：懂視網責編：小采時間：2020-11-27 18:55:17

瀏覽器兼容解決FF/IE6/IE7背景專用CSSHACK_經驗交流

瀏覽器兼容解決FF/IE6/IE7背景專用CSSHACK_經驗交流:自從互聯網開始的那一刻起，各瀏覽器間的爭斗就沒有停止過。當然其中最苦的就是網頁制作人員了，為了達到用戶體驗以及可用性的標準，不得不在多個瀏覽器上為統一效果而奔波。真希望哪一天FF可以一統天下，雖然現在還是IE的大天下。特別是微軟最新發布的IE7

推薦度：

點擊下載本文 文檔為doc格式

導讀瀏覽器兼容解決FF/IE6/IE7背景專用CSSHACK_經驗交流:自從互聯網開始的那一刻起，各瀏覽器間的爭斗就沒有停止過。當然其中最苦的就是網頁制作人員了，為了達到用戶體驗以及可用性的標準，不得不在多個瀏覽器上為統一效果而奔波。真希望哪一天FF可以一統天下，雖然現在還是IE的大天下。特別是微軟最新發布的IE7

自從互聯網開始的那一刻起，各瀏覽器間的爭斗就沒有停止過。當然其中最苦的就是網頁制作人員了，為了達到用戶體驗以及可用性的標準，不得不在多個瀏覽器上為統一效果而奔波。真希望哪一天FF可以一統天下，雖然現在還是IE的大天下。特別是微軟最新發布的IE7瀏覽器，其CSS的兼容性確實給一些網頁制作人員又添加了一個沉重的新負擔。
為了讓各瀏覽器有同樣的顯示效果，我們不得不用到CSS HACK。當然在這篇文章中我們只談現在使用率最高的IE6和FF，以及將來可能會成為主流的IE7的CSS HACK，至于IE6以下版本已OP、SF在這此先不詳細說明。新手看了這片文章一定會有所收獲，而高手們路過一下就可以了，呵呵！

方案一
先來看看下面的CSS代碼：

background-color:orange;
*background-color:blue!important;
*background-color:red;
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>腳本之家-www.gxlcms.com css test</title> <style type="text/css"> .bgc{ width:200px; height:200px; background-color:orange; *background-color:blue!important; *background-color:red; } </style> </head> <body> </body> </html>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
下面我簡單解釋一下各瀏覽器怎樣理解這三個屬性：
在FF下，第2、3個屬性不認識，其中第2個屬性如果只是加了!important的話FF一定認識的，但因為前面又加了個*，所以不認識了（僅IE7認識）。所以它讀的是background-color:orange;
在IE7下，第1、2、3個屬性IE7雖然都認識，但!important表示的是優先，所以它讀的是*background-color:blue!important;
在IE6下，第2個屬性不認識，第1、3個屬性都認識，但因為第3個屬性覆蓋掉第1個屬性，所以IE6最終讀取的*background-color:red。

方案二
先來看看下面的CSS代碼：
代碼如下:
background-color:orange;
*background-color:blue;
_background-color:red;

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css test 腳本之家-www.gxlcms.com</title> <style type="text/css"> .bgc{ width:200px; height:200px; background-color:orange; *background-color:blue; _background-color:red; } </style> </head> <body> </body> </html>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
下面我簡單解釋一下各瀏覽器怎樣理解這三個屬性：
在FF下，第2、3個屬性FF不認識，所以它讀的是background-color:orange;
在IE7下，第3個屬性IE7不認識，所以它讀第1、2個屬性，又因為第2個屬性覆蓋了第1個屬性，所以IE7最終讀出的是第2個屬性*background-color:blue;
在IE6下，這3個屬性IE6都認識，所以3個屬性都可以讀取，又因為第3個屬性覆蓋掉前2個屬性，所以IE6最終讀取的是_background-color:red。

其中IE的讀取屬性一定要知道，這對初學者而言使用CSS HACK是非常至關重要的，瀏覽器讀取屬性是從上至下的，也就是說同樣屬性的設置最后一個讀取到的才是在瀏覽器上顯示的。此外在方案二種的“_”這是只有IE6才認識的，可見其大胃王的感覺。另外!important不同，它打破了從上至下的讀取習慣，使用的是優先顯示。而在上述兩個方案中可以看出FF除了正規CSS書寫和!important外其它都不認識，標準就是統一的。

在這里并不是慫恿大家鼓勵使用CSS HACK，只是別看到其他人寫的CSS代碼中有這些HACK不知道是什么意思。畢竟用CSS HACK來解決瀏覽器間的兼容并不是長遠方法，如果新版本瀏覽器的出現說不定會把你原來寫的CSS HACK怎樣，IE7就是個很好的例子。盡量達到零使用CSS HACK或者說少使用，因為好的布局結構是可以很好解決這些問題，這樣的網站也大有人在。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

瀏覽器兼容解決FF/IE6/IE7背景專用CSSHACK_經驗交流

推薦度：

點擊下載本文 文檔為doc格式

標簽：瀏覽器解決專用

熱門焦點

瀏覽器兼容解決FF/IE6/IE7背景專用CSSHACK_經驗交流

瀏覽器兼容解決FF/IE6/IE7背景專用CSSHACK_經驗交流

瀏覽器兼容解決FF/IE6/IE7背景專用CSSHACK_經驗交流

最新推薦

猜你喜歡

熱門推薦