web端：
css:
1，不同浏览器的标签默认的margin和padding不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
碰到频率:100%
解决方案：
可以使用Normalize来清除默认样式
也可以使用如下代码：
* { margin:0; padding:0; }
2
，图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。
碰到几率：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