在開發過程中遇見過的相容問題

PC端

一、html、CSS部分

1.低版本瀏覽器不支援html5新增的標籤

​ 方法：引入第三方庫html5shiv.js

2.ul標籤在IE瀏覽器中有margin，在fireFox瀏覽器中有padding

​ 方法：在設定css時，設定margin：0；padding：0；

3.IE6下使用margin：0 auto ；無法居中

​ 方法：為父容器設定text-align：center

4.IE6下圖片部有空隙

​ 方法：給圖片設定display：block；vertical-align：top/bottom/middle;給父元素設定：font-size:0;

二、js部分

1.事件繫結

​ 非IE瀏覽器：addEventListener()

​ IE瀏覽器：attachEvent()

2.取消預設行為

​ 非IE瀏覽器：e.preventDefault()

​ IE瀏覽器：window.event.returnValue=false

3.阻止事件冒泡

​ 非IE瀏覽器：e.stopPropagation()

​ IE瀏覽器：window.event.cancelBubble=true

移動端

1.在ios和android下，audio和vedio不能自動播放

//方法：觸屏即播
$('html').on('touchstart',function(){
    audio.
 
play()
})

2.CSS動畫頁面閃白，動畫卡頻

​ 方法：（1）使用transform和opacity屬性來設計動畫，不適用position的left和top來定位。

​ （2）設定時，加上不同瀏覽器的字首，如-webkit-、-moz-、-ms-、-o-

3.input的placeholder會出現文字位置偏上的情況

​ 方法：設定line-height：normal

4.fixed定位缺陷

​ ios下，當出現軟鍵盤的時候，會影響fixed元素定位

​ 方法：使用iScroll外掛解決