常见的兼容性问题总结
微软提供的测试工具，但是只能抓取截图，不能在线调试，比较鸡肋
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值很大也不起作用
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
- 判断浏览器版本
<!--[if IE 8]> ie8 <![endif]-->
<!--[if IE 9]> 骚气的 ie9 浏览器 <![endif]-->
- 判断是否是 Safari 浏览器
/* Safari */
var isSafari = /a/.__proto__=='//';
- 判断是否是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不要使用百分数。
