10個容易忽略的前端兼容性問題

兼容問題一直是前端工程師們的夢魘。今天，為大家總結10個容易忽略的前端兼容性問題，供大家參考。

1

在ios8系統中，用h5與APP通信不能傳帶有複雜鏈接符的字元串。

在移動端開發中，經常需要h5與APP進行交互。這時就需要前端和APP開發人員雙方規定一種傳輸協議。在協議中可以添加與APP交互需要的參數。但是在IOS8系統中，不支持參數中有複雜鏈接符，比如JSON格式的字元串、&等等。目前為止，下劃線是唯一支持的連接符。

2

safari中偽元素不支持CSS3動畫。

在項目中肯定有很多前端開發人員使用css的偽元素屬性進行頁面構建。雖然這種方式很方便，但是在safari中並不支持偽元素的CSS3動畫效果。

3

safari中當一個元素的高度為零時，下邊的同級元素的上外邊距會覆蓋這個元素。

在IE、chromet、FF中，即使一個元素的高度為0，也會把它當作塊級元素看待，在頁面中佔據相應的位置。但是在safari中，高度為0的元素會被直接忽略。

4

ios系統中在移動瀏覽器的頁面中給按鈕加JS事件，其按鈕必須是原生HTML按鈕或者由<a>標籤自定義構成。

這個問題當時困擾了小編很久，經過一番盤查，終於解決。原來在IOS系統中，瀏覽器只支持給原生HTML按鈕或<a>標籤加JS事件。

5

在移動瀏覽器中給根元素（例如：html）添加overflow:hidden，只有在某些安卓自帶瀏覽器（例如華為的自帶瀏覽器）中才有效。

overflow:hidden這個CSS樣式是大家常用到的。大家用這個樣式可以實現很多目的。其中一個常用的就是隱藏內容溢出，把瀏覽器的滾動條隱藏。這個在PC端瀏覽中毫無問題。但是除了少數安卓自帶瀏覽器，在大多數移動瀏覽器中，給根元素（例如：html）添加這個樣式就會失效。除非給根元素同時添加有實際數值的高度。為了適應移動端頻幕的多種尺寸，只能運用JS動態獲取視窗的高度，然後給根元素設置相同的高度，方可把移動瀏覽器的滾動條隱藏。

6

在某些安卓系統手機自帶瀏覽器（例如：華為手機）中，當父級元素是彈性盒子布局時（含有-webkit-box-flex屬性），其子元素的margin-bottom失效，不能撐開父級元素。

這個問題是小編在某個移動項目開發中碰到的。直接將外邊距（margin）改為內邊距(padding)就可解決。

7

在safair中使用Date.parse()解析時間字元串，其格式必須是YYYY/MM/DD HH:MM:SS。

Date.parse() 方法解析一個表示某個日期的字元串，並返回從1970-1-1 00:00:00 UTC 到該日期對象（該日期對象的UTC時間）的毫秒數，如果該字元串無法識別，或者一些情況下，包含了不合法的日期數值（如：2015-02-31），則返回值為NaN。

上述是JavaScript 參考文檔的說明。嚴格來說，其解析的時間字元串必須是YYYY/MM/DD HH:MM:SS。但是，在IE、chrome、FF中，也可以解析YYYY-MM-DD HH:MM:SS或者YYYY.MM.DD HH:MM:SS這兩種非標準格式的時間字元串。而safari只能解析標準格式。因此，開發人員在使用這個方法時，最好先把非標準格式轉換成標準格式，這樣就可以避免兼容問題。

8

在IOS系統中H5播放器不支持自動播放。

在iphone和ipad上用HTML5播放器時，不能自動播放，apple的解釋說是為用戶節省流量，我覺得這個考慮有點多餘。

當時為了解決這個問題，做了些調研，最好的方法就是在IOS系統的瀏覽器中給頁面根元素綁定一次touchstart事件播放流媒體文件，模擬自動播放。

9

標準瀏覽器是只認識documentElement.scrollTop的，但chrome卻不認識這個，在有文檔聲明時，chrome也只認識document.body.scrollTop。

document.body.scrollTop與document.documentElement.scrollTop兩者有個特點，就是同時只會有一個值生效。比如document.body.scrollTop能取到值的時候，document.documentElement.scrollTop就會始終為0；反之亦然。所以，如果要得到網頁的真正的scrollTop值，可以這樣：

任選上述其中一種方式都可以解決。

10

我們常說的事件處理時的event屬性，在標準瀏覽器其是傳入的，IE下由window.event獲取的。並且獲取目標元素的方法也不同，標準瀏覽器是event.target，而IE下是event.srcElement

具體參考《javascript高級程序設計(第3版)》，在此不再贅述。