瀏覽器核心及對應相容性的處理問題

2022-09-01 01:00:21 字數 1439 閱讀 7464

眾所周知,目前市場上最火的五大瀏覽器是:google chrome、firefox(ff)、internet explorer(ie)、safari、opera。

他們相對應的核心是什麼呢?

谷歌瀏覽器:google chrome,谷歌瀏覽器之前一直使用蘋果的webkit核心,但是現在它與蘋果核心分道揚鑣,自己開創了新的blink核心,這個核心也在被歐鵬(opera瀏覽器)共同採用和開發;

火狐瀏覽器:mozilla firefox ,核心是gecko;

opera瀏覽器:核心是blink;

safari瀏覽器:使用的是蘋果公司自己的核心webkit;

ie瀏覽器:微軟出品的瀏覽器,ie4以上版本都是trident核心。由於壟斷性,ie在很長一段時間內沒有更新,導致兩個後果:一是ie與w3c標準脫節,二是trident核心大量的bug問題沒得到及時解決。所以這就給了其他瀏覽器機會,比如firefox等。也正是這些原因,使web前端開發人員大費周折,特別是ie6正處在新舊交替的關鍵地方(已經逐漸被捨棄)。

當然除了這五大瀏覽器之外,市場上還有很多,例如:

搜狗瀏覽器:相容模式(ie:trident)和高速模式(webkit);

遨遊瀏覽器:相容模式(ie:trident)和高速模式(webkit);

qq瀏覽器:普通模式(ie:trident)和極速模式(webkit);

360極速瀏覽器:基於谷歌(chromium)和ie核心;

360安全瀏覽器:ie核心。

當然,既然瀏覽器的核心不同,那麼瀏覽器在解析**的時候就會有可能不一樣,因為他們所支援的方法有不同之處。

在pc端,通用的方法有三種:分別是能力檢測、**檢測和怪癖檢測。

1.能力檢測(常用):通過獲取標籤的api,檢測他是否支援這個api,如果支援,那麼就用,否則就換另一種api來達到效果,例如原生js中常用的innertext方法:

1

//書寫innertext的相容性**:2//

獲取標籤的innertext(相容所有瀏覽器)

3function

getinnertext(element) else9}

1011

//設定標籤的innertext(相容所有瀏覽器)

12function

setinnertext(element, value) else

19 }

3.怪癖檢測:由於有些瀏覽器有自己獨特的特徵,通過檢測瀏覽器有無對應的特徵,來分辨瀏覽器。

瀏覽器相容性處理要點

相容性處理要點 1 doctype 影響 css 處理 2 ff 設定 padding 後,div 會增加 height 和 width,但 ie 不會,故需要用 important 多設乙個 height 和 width 3 ff 支援 important,ie 則忽略,可用 important ...

瀏覽器相容性及處理方案 小結

瀏覽器相容性問題,往往是個別瀏覽器對一些標準定義不一致導致的。常用的瀏覽器及對應核心如下 瀏覽器核心 ietrident firefox gecko chrome 先為webkit,後為blink 與opear共同開發 safari webkit opear blink 瀏覽器相容性導致的問題 1....

瀏覽器相容性

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