首頁 > web前端 > css教學 > 瀏覽器相容解決FF/IE6/IE7背景專用CSS HACK_經驗交流

瀏覽器相容解決FF/IE6/IE7背景專用CSS HACK_經驗交流

WBOY
發布: 2016-05-16 12:06:27
原創
1799 人瀏覽過

自從網路開始的那一刻起,各瀏覽器間的爭鬥就沒有停止過。當然其中最苦的就是網頁製作人員了,為了達到使用者體驗以及可用性的標準,不得不在多個瀏覽器上為統一效果而奔波。真希望哪一天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;


[​​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程式碼:
複製程式碼 程式碼如下:

背景顏色:橘色;
*背景顏色:藍色;
_背景顏色:紅色;


[​​Ctrl A 全選注:如需引入外部Js需刷新才能執行]

下面我簡單解釋一下各個器如何瀏覽這三個屬性: 在FF下,第2、3個屬性FF不認識,所以它讀的是background-color:orange;
在IE7下,第3個屬性IE7不認識,所以它讀取第1、2個屬性,又因為第2個屬性覆蓋了第1個屬性,所以IE7最終寫入的是第2個屬性*背景顏色:藍色;
在IE6下,這3個屬性IE6都認識,所以3個屬性都可以讀取,又因為第3個屬性覆蓋掉前2個屬性,所以IE6最終讀取的是_background-color:red

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

在這裡不是慫恿大家鼓勵使用CSS HACK,只是別看到其他人寫的CSS程式碼中有這些HACK不知道是什麼意思。畢竟用CSS HACK來解決瀏覽器間的兼容不長的方法,如果有新版本瀏覽器的出現說不拿你原來寫的CSS HACK怎麼樣,IE7就是個很好的例子。盡量達到零使用CSS HACK說或少使用,因為佈局結構是很好可以解決好的這些問題,這樣的網站也大有人在。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板