web端：
css:
1，不同瀏覽器的標簽默認的margin和padding不同
問題症狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率:100%
解決方案：
可以使用Normalize來抹平默認樣式的差異。
也可以使用如下代碼：
* { margin:0; padding:0; }
2
，圖片默認有間距
問題症狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，通配符清除間距也不起作用。（根本原因是fontSize）
碰到幾率：20%
解決方案：
1）給img標簽添加左浮動float：left；
2）給img標簽添加display：block；
備注：因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道。（也可使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器兼容問題的用法，所以盡量不要使用）
3，各種特殊樣式的兼容，比如透明度、圓角、陰影等。特殊樣式每個瀏覽器的代碼區別很大，所以，只能現查資料通過給不同瀏覽器寫不同的代碼來解決。
4，清除浮動：
.clearfix::after { content: ""; display: table; clear: both; } .clearfix { *zoom: 1; }
5，上下margin的重疊問題
描述：給上邊元素設置了margin-bottom，給下邊元素設置了margin-top，瀏覽器只會識別較大值；
解決方案：margin-top和margin-bottom中選擇一個，只設置其中一個值；
javascript:
1.event.srcElement
IE下，even不存在target屬性
srcObj = event.srcElement ? event.srcElement : event.target;
2.
父節點parentElement
ele.parentElement //firebox不支持 ele.parentNode //通用
3.
移除節點
removeNode(); //firebox不支持 removeChild(); //通用，取上一層父節點再移除子節點
4.坐標
var page = {}; page.x = event.x ? event.x : event.pageX; page.y = event.y ? event.y:event.pageY; //event的x,y在IE中支持，pageX和pageY在Firefox中支持
5.
事件監聽
function addEvent(elem, eventName, handler) { if (elem.attachEvent) { elem.attachEvent("on" + eventName,function(){ handler.call(elem)}); //此處使用回調函數call()，讓this指向elem } else if (elem.addEventListener) { elem.addEventListener(eventName, handler, false); } } function removeEvent(elem, eventName, handler) { if (elem.detachEvent) { elem.detachEvent("on" + eventName,function(){ handler.call(elem)}); //此處使用回調函數call()，讓this指向elem } else if (elem.removeEventListener) { elem.removeEventListener(eventName, handler, false); } } //IE提供了attachEvent和detachEvent兩個接口，而Firefox提供的是addEventListener和removeEventListener。
6.
鍵盤事件 keyCode
function getKeyCode(e){ //兼容IE和Firefox獲得keyBoardEvent對象 e = e ? e : (window.event ? window.event : "") //兼容IE和Firefox獲得keyBoardEvent對象的鍵值 return e.keyCode ? e.keyCode : e.which; } //IE：e.keyCode //fireFox: e.which
移動端：
1.IOS移動端click事件300ms的延遲相應
移動設備上的web網頁是有300ms延遲的，往往會造成按鈕點擊延遲甚至是點擊失效。
這是由於區分單機事件和雙擊屏幕縮放的 歷史原因 造成的。
解決方式：
- fastclick可以解決在手機上點擊事件的300ms延遲
- zepto的touch模塊，tap事件也是為了解決在click的延遲問題
- 觸摸屏的相應順序為touchstart-->touchmove-->touchend-->click，也可以通過綁定ontouchstart事件，加快事件的響應，解決300ms的延遲問題
2.ios的一些情況下對非可點擊元素（label，span）監聽click事件，iso下不會觸發，css增加cursor：pointer就搞定了。
3.h5底部輸入框被鍵盤遮擋問題
h5頁面有個很蛋疼的問題就是，當輸入框在最底部，點擊軟鍵盤后輸入框會被遮擋。可采用如下方式解決
var oHeight = $(document).height(); //瀏覽器當前的高度 $(window).resize(function(){ if($(document).height() < oHeight){ $("#footer").css("position","static"); }else{ $("#footer").css("position","absolute"); } });
4.不讓 Android 手機識別郵箱
<meta content="email=no" name="format-detection" />
5.禁止 iOS 識別長串數字為電話
<meta content="telephone=no" name="format-detection" />
6.禁止 iOS 彈出各種操作窗口
-webkit-touch-callout:none
7.消除 transition 閃屏
-webkit-transform-style: preserve-3d; /*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/ -webkit-backface-visibility: hidden; /*(設置進行轉換的元素的背面在面對用戶時是否可見：隱藏)*/
8.iOS 系統中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格
可以通過正則去掉 this.value = this.value.replace(/\u2006/g, '');
9.禁止ios和android用戶選中文字
-webkit-user-select:none
10.CSS動畫頁面閃白,動畫卡頓
解決方法: 1.盡可能地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位 2.開啟硬件加速
-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
11.fixed定位缺陷
- ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
- android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
- ios4下不支持position:fixed
- 解決方案： 可用iScroll插件解決這個問題
17.阻止旋轉屏幕時自動調整字體大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
18 Input 的placeholder會出現文本位置偏上的情況
input 的placeholder會出現文本位置偏上的情況：PC端設置line-height等於height能夠對齊，而移動端仍然是偏上，解決是設置line-height：normal
19 往返緩存問題
點擊瀏覽器的回退，有時候不會自動執行js，特別是在mobilesafari中。這與往返緩存(bfcache)有關系。
解決方法 ：window.onunload = function(){};
20. calc的兼容性處理
CSS3中的calc變量在iOS6瀏覽器中必須加-webkit-前綴，目前的FF瀏覽器已經無需-moz-前綴。
Android瀏覽器目前仍然不支持calc，所以要在之前增加一個保守尺寸：
div { width: 95%; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); }
21 在移動端修改難看的點擊的高亮效果，iOS和安卓下都有效：
* {-webkit-tap-highlight-color:rgba(0,0,0,0);}
22. overflow: auto; IOS手機滾動卡頓
-webkit-overflow-scrolling: touch; //有回彈效果
還有其他移動端適配問題，可以參考這個 https://juejin.im/post/5cddf289f265da038f77696c?utm_source=gold_browser_extension#heading-1