再談瀏覽器的相容性

2021-09-30 16:42:27 字數 1267 閱讀 9166

首先,關於css hack的方法網上有很多介紹,種類繁多,初學者常常感到很困惑。這類的css hack的方法,有的是針對某乙個非常特殊的情況的方法,有的則是相對於比較通用的一些方法。

對於後者我們在平常的學習工作中,可以多留心收集一些,前者則不需要太關注,只是遇到的時候到網上搜尋一下,尋找解決方法即可。

這裡舉乙個比較通用的hack方法,比如對於css中的某乙個屬性,我們希望針對不同的瀏覽器,設定不同的值。例如,某乙個div,我們希望在firefox中寬度為50畫素,在ie中寬度為60畫素。那麼怎麼實現呢?請看如下**:

123

4

#demo div
在上面的**中, 第2行的width:50px這是普通的樣式,下一行中,在width屬性前面加乙個加號,這條樣式在firefox中被認為無效,但是在ie中這個加號會被忽略掉,因此仍然被理解為width屬性,從而覆蓋上一條的設定,這樣就可以區分firefox瀏覽器和ie瀏覽器了。

那麼如果希望進一步區分ie 6和ie 7呢?請看如下**:

123

45

#demo div
上面**就可以實現對三種瀏覽器的區分了。在ie7中,屬性前加乙個加號,這個加號會被忽略,而如果在屬性前加乙個下劃線這整條樣式會被忽略,從而實現了對這三種主流瀏覽器的區分。

到這裡,我們自然會想到,什麼情況下會用的這種方法來區分瀏覽器呢?我們要製作的頁面,通常會有兩種情況,一種是徹底從頭開始做,另一種是基於乙個已經存在的網頁進行修改或者修補。

對於第一種情況來說,我們對網頁的每乙個細節都十分清楚,因此並不經常遇到非常firefox和ie的相容性問題,即使遇到了,一般也可以找到其他方法解決。而對於第二種情況來說,則複雜的多了,因為乙個網頁可能非常複雜,層疊關係也很複雜,對於後接手的人,很難搞清楚某乙個的屬性上面有多少層設定會對他產生影響,因此往往只能採用「貼膏藥」的方式進行修補。

比如說,如下的乙個頁面的最終效果,在製作圓角框的時候,在ie中,圓角對整齊之後,在firefox中卻出現如圖所示的錯位,而如果按照firefox調整好,在ie中又會出現錯位。

而頁面的內容層層巢狀,在並不知道細節的情況下,很難找到問題的根源。因此這裡使用修補的方法就很方便(儘管不是最優雅完善的方法),例如對於控制圓角影象位置的屬性使用上面的方法,分別控制即可。

總上所述,對任何屬性都可以使用加號或者下劃線方法,來實現針對不同瀏覽器的各自設定。當然,最後還是要指出,任何hack方法都要慎重使用,最好還是能夠按照標準、優雅的css來進行設計,這樣的**可讀性、維護性都要好很多,也是我們追求的目標。

瀏覽器相容性

瀏覽器相容性是乙個很長久的話題,之所以前端需要面對瀏覽器相容性,是因為使用者的環境有不同的平台,不同的瀏覽器。不同的廠商之間為了相互競爭,對標準的實現不一樣。不同的瀏覽器有不同的核心。即使同乙個瀏覽器也有不同的版本,不同的版本對同一特性的支援情況也不盡相同。也可能某個瀏覽器的某個版本針對某個特性存在...

瀏覽器相容性

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...

瀏覽器相容性

trident ie核心 gecko firefox 核心 webkit chrome,safari blink webkit 的分支 presto 是挪威產瀏覽器 opera 的 前任 核心,為何說是 前任 因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌大本營。移動端的瀏覽器核心主要說...