常见的兼容性问题总结

微软提供的测试工具，但是只能抓取截图，不能在线调试，比较鸡肋
https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/

国内常用浏览器内核

• chrome：-webkit-
• Safari：-webkit-
• Firefox：-Gecko-
• IE：-Trident-
  https://www.cnblogs.com/vajoy/p/3735553.html

由于众所周知的原因，国内的主流浏览器都是双核浏览器：基于Webkit的内核用于常用网站的高速浏览，基于IE的内核主要用于部分网银、政府、办公系统等网站的正常使用。以360浏览器为例，我们优先通过Webkit内核渲染主流网站，只有少量的网站通过IE内核渲染，以保证页面兼容性。

浏览器默认内核的指定只需在head标签中添加一行代码即可：
若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand">
content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。

注：有时候我们所说的“浏览器内核”甚至“渲染引擎”，其实除了渲染引擎，也悄悄包含了javascript引擎，如WebKit，它由渲染引擎WebCore和javascript引擎JSCore组成。
V8：谷歌实际上认为Webkit中的JSCore不够好，才自己搞了一个V8 JS引擎，这就是Chrome比Safari在某些JS测试中效率更高的原因。

css

css3的不同浏览器支持写法eg:
直接写css

 -webkit-transition: .5s all;
 -moz-transition: .5s all;
 -ms-transition: .5s all;
-o-transition: .5s all;
 transition: .5s all;

react写内联css

style:{
  WebkitBoxOrdinalGroup: order,
  MozBoxOrdinalGroup: order,
  MsFlexOrder: order,
  WebkitOrder: order,
  order: order
}

操作dom.style

    document.body.style.userSelect = value;
    document.body.style.webkitUserSelect = value;
    document.body.style.msUserSelect = value;
    document.body.style.MozUserSelect = value;

Mac OS X下和win10下 chrome对calc（）属性继承的解析
ie10下img会自动加上图片原始宽高
https://www.zhangxinxu.com/wordpress/2015/02/different-height-100-height-inherit/

注意点:
(1):z-index属性只作用在被定位了的元素上。所以如果你在一个没被定位的元素上使用z-index的话，是不会有效果的.
(2)同一个父元素下的元素的层叠效果会受父元素的z-index影响,如果父元素的z-index值很小,那么子元素的z-index值很大也不起作用

使用Flexbox：新旧语法混用实现最佳浏览器兼容

js交互性兼容

addEventListener 只支持ie9+
attachEvent事件绑定要加on
在 IE 中可以使用 DOM0 级定义的事件处理程序指定方法，也可以使用 attachEvent()，它与使用 DOM0 级方法的主要区别在于事件处理程序的作用域。使用 attachEvent()方法注册的事件处理程序会在全局作用域中运行，即 this == window。

pageXOffset 属性是 scrollX 属性的别名：
window.pageXOffset == window.scrollX; // 总是 true
为了跨浏览器兼容性，请使用 window.pageXOffset 代替 window.scrollX。另外，旧版本的 IE（<9）两个属性都不支持

获取scrollTop ,document.documentElement.scrollTop兼容非chrome浏览器

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

Safari、chrome阻止对在异步调用中进行的window.open()

浏览器hack

1. 判断浏览器版本

 <!--[if IE 8]> ie8 <![endif]-->
<!--[if IE 9]> 骚气的 ie9 浏览器 <![endif]-->

2. 判断是否是 Safari 浏览器

/* Safari */
 var isSafari = /a/.__proto__=='//';

3. 判断是否是Chrome

/* Chrome */
 var isChrome = Boolean(window.chrome);

others

相邻的flex items的margin不重叠，同时margin与padding 在使用百分比值时候，计算时候可以有两种标准一种是left/right根据width，top/bottom根据高度。另一种则是left/right/bottom/top都根据width，规范不强制约束，浏览器可以二选一，因此这也意味制百分比在计算数值时候在不同浏览器可能表现不同。所以margin padding不要使用百分数。

Taro+小程序入门开发填坑
小程序转发封面填坑之canvas做图