驗證碼前端對各瀏覽器的支援

極驗發表於2018-05-09
前端瀏覽器

由於CSS， JS的更新， 各瀏覽器對新功能的支援各有差異，當使用新功能特性時，必然會帶來一些需要相容處理的情況， 以下就從CSS, JS兩個方面說明下驗證碼對各瀏覽器的支援。

CSS相容

  1. 低版本IE處理css的相容， 主要是IE，IE6/7/8/9 正常寫一個樣式，類似：{ 屬性名：屬性值 } 就可以， 但是有些情況下，我們需要針對低版本的IE使用特殊樣式， 那我們就可以在屬性名前加上字首，各版本IE都有各種識別的屬性字首寫法， 如下： _position: fixed // IE6 *position: fixed // IE6, IE7 position: fixed \9 // IE6, IE7, IE8, IE9 position: fixed // 正常寫法 示例如：IE inline-block相容： *display: inline; *zoom:1; vertical-align:middle;

  2. 元素居中處理 通用處理： 使用 translate 屬性 相容方案： 在IE6/7/8下， 使用 margin-left, margin-top 屬性來定位位置

  3. Canvas相容 驗證碼中canvas 主要用到圖片的顯示，在IE和低版本的Android系統對canvas的支援很弱，經常導致圖片不能顯示，驗證碼不能使用， canvas相容對驗證碼很重要。 驗證碼的原始圖片是打亂的，如下圖：

驗證碼前端對各瀏覽器的支援
驗證碼實際顯示效果如下圖：

驗證碼前端對各瀏覽器的支援

通用處理：通過canvas的方法，如：getImageData, putImageData, drawImage， 來繪製圖片 相容處理：把圖片顯示在很多div結構中，圖片作為背景圖，HTML原始碼效果如下：

驗證碼前端對各瀏覽器的支援

  1. 動畫處理： 通用處理：CSS3新功能，如 keyframes, transition 來實現動畫效果。 相容方案：JS處理，通過requestAnimationFrame或者setTimeout， 定時修改元素屬性，讓使用者視覺感受流暢的效果

JS部分 現在JS的標準更新比較快， 從ES3, ES5到現在時髦的ES6, ES7， 瀏覽器廠商的支援個不同，而我們又要支援老版本的瀏覽器， 所以JS的程式碼都是從ES3開始相容， 我們也使用了一些新特性， 為了保證相容，我們會自己實現polyfills

  1. Promise, Generator 這兩個特性是在ES6開始支援，開源的polyfill也是很多，實現起來也還好

  2. 原生物件的方法擴充套件， 如Array, Object, JSON 以下列表是我們原生實現的方法 Array indexOf, map, filter Object assign JSON stringify

  3. 事件支援 DOM支援的事件方法相容處理： addEventListener/removeEventListener, attachEvent/detachEvent, onType/null 程式碼示例：

驗證碼前端對各瀏覽器的支援

  1. IE6/7 跨域 介面請求正常都是通過XMLHttpRequest物件傳送， 處理跨域很多都是通過POST方式，服務端設定處理。 但是IE6/7不支援， 就只能通過jsonp處理， jsonp是GET請求，引數都在url中傳輸， IE6/7下URL長度限制小，很容易遇到URL長度限制的問題， 所以在IE6/7下，我們對URL長度會限制大小，以免請求不成功

相關文章