減少瀏覽器相容性問題

2021-09-23 20:58:16 字數 1325 閱讀 9872

做為乙個前端工程師,不少時間都在處理瀏覽器相容性問題。本文對如何減少瀏覽器相容性問題的方法做了些總結。

確定執行環境

在開發前,我們要確定頁面的執行環境:要相容哪些瀏覽器,以及哪些螢幕解析度。

如果我們不了解我們的執行環境,相容性也無從談起。也只有在確定來執行環境後,我們才可以選擇合適的方式。我們可以借助 html5 與 css3 技術應用評估來選擇用哪些技術。

查詢特性的相容性

在使用某個特性前,我們可以使用 can i use 來查詢某特性在各個瀏覽器上的相容性情況。也可以在**中用 modernizr 進行特性探測。

下面是一些查詢相容性的**

es5規範瀏覽器相容性**

es6規範瀏覽器相容性**

html5 移動端相容性速查

如果實在想用某個特性,但某個想相容的瀏覽器不支援,可以找找有沒庫來做支援的

html5 cross browser polyfills

html5 polyfills

了解哪些寫法會產生相容性問題

有時候一些相容性問題的產生並不是因為我們的寫法問題,而是瀏覽器自身的 bug(如 ie 6 的雙邊距問題),或者瀏覽器對標準的支援不一致。所以我們要了解哪些寫法會產生相容性問題,然後避免那樣寫。

推薦認真研究瀏覽器相容性-根本原因內容列表。

充分的測試

推薦使用 愛測試itest平台。它是阿里巴巴研發的前端自動化測試工具,支援主流瀏覽器的js錯誤檢測,支援頁面截圖,一鍵驗證,壞死鏈結檢測等。

現在一些多瀏覽器自動化測試的工具,服務(如 sauce labs)也很多,暫時還沒怎麼研究,以後研究後可以給大家分享~

一些技巧

讓用 ie 訪問頁面時,盡可能用最新的 ie 渲染引擎。通過加在 html 中加標籤 。

讓雙核瀏覽器(如 360,搜狗等國產瀏覽器)訪問本網頁時,用 webkit 核心來渲染。通過加在 html 中加標籤 。(注:目前只有 360 瀏覽器支援)

用 html5 的 doctype:。避免使用有問題的 doctype 而導致的瀏覽器用怪癖模式來渲染頁面。

一些 css 屬性記得要加瀏覽器字首

有時頁面的元素改變後,應該被重繪,但瀏覽器沒有重繪,可以用讓元素隱藏,然後再顯示的方式來讓瀏覽器重繪

瀏覽器相容性問題

苦惱的區別 1.image repeat 在火狐裡比較正常,可是在ie中一直repeat.背景是乙個關閉的x號,div設定的backgourn image url xx 結果在ie中卻不行,最後找到原因是ie中要顯式的寫上image repeat norepeat這屬性,還有好多的差異,明天 去了 ...

瀏覽器相容性問題

瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率 100 解決方案 css裡 備註 這個是最常見的也是最易解決的乙個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元 來設定各個標...

瀏覽器相容性問題

解決方案 應該用ie8相容模式瀏覽網頁,而不應該用ie9或ie10渲染模式.很多使用者安裝ie10後發生很多網頁顯示錯亂,就是相容性的原因,因為ie10預設的渲染模式是ie10.此時應該將其改為ie7渲染模式。為什麼用ie6 7渲染模式的原因如下 中國所有網頁肯定都支援ie,支援ie就是支援ie核心...