微軟提供的測試工具，但是只能抓取截圖，不能在線調(diào)試，比較雞肋
https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/
國內(nèi)常用瀏覽器內(nèi)核
- chrome：-webkit-
- Safari：-webkit-
- Firefox：-Gecko-
- IE：-Trident-
https://www.cnblogs.com/vajoy/p/3735553.html
由于眾所周知的原因，國內(nèi)的主流瀏覽器都是雙核瀏覽器：基于Webkit的內(nèi)核用于常用網(wǎng)站的高速瀏覽，基于IE的內(nèi)核主要用于部分網(wǎng)銀、政府、辦公系統(tǒng)等網(wǎng)站的正常使用。以360瀏覽器為例，我們優(yōu)先通過Webkit內(nèi)核渲染主流網(wǎng)站，只有少量的網(wǎng)站通過IE內(nèi)核渲染，以保證頁面兼容性。
瀏覽器默認(rèn)內(nèi)核的指定只需在head標(biāo)簽中添加一行代碼即可：
若頁面需默認(rèn)用極速核，增加標(biāo)簽：<meta name="renderer" content="webkit">
若頁面需默認(rèn)用ie兼容內(nèi)核，增加標(biāo)簽：<meta name="renderer" content="ie-comp">
若頁面需默認(rèn)用ie標(biāo)準(zhǔn)內(nèi)核，增加標(biāo)簽：<meta name="renderer" content="ie-stand">
content的取值為webkit,ie-comp,ie-stand之一，區(qū)分大小寫，分別代表用webkit內(nèi)核，IE兼容內(nèi)核，IE標(biāo)準(zhǔn)內(nèi)核。
注：有時(shí)候我們所說的“瀏覽器內(nèi)核”甚至“渲染引擎”，其實(shí)除了渲染引擎，也悄悄包含了javascript引擎，如WebKit，它由渲染引擎WebCore和javascript引擎JSCore組成。
V8：谷歌實(shí)際上認(rèn)為Webkit中的JSCore不夠好，才自己搞了一個(gè)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寫內(nèi)聯(lián)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/
注意點(diǎn):
(1):z-index屬性只作用在被定位了的元素上。所以如果你在一個(gè)沒被定位的元素上使用z-index的話，是不會有效果的.
(2)同一個(gè)父元素下的元素的層疊效果會受父元素的z-index影響,如果父元素的z-index值很小,那么子元素的z-index值很大也不起作用
使用Flexbox：新舊語法混用實(shí)現(xiàn)最佳瀏覽器兼容
js交互性兼容
addEventListener 只支持ie9+
attachEvent事件綁定要加on
在 IE 中可以使用 DOM0 級定義的事件處理程序指定方法，也可以使用 attachEvent()，它與使用 DOM0 級方法的主要區(qū)別在于事件處理程序的作用域。使用 attachEvent()方法注冊的事件處理程序會在全局作用域中運(yùn)行，即 this == window。
pageXOffset 屬性是 scrollX 屬性的別名：
window.pageXOffset == window.scrollX; // 總是 true
為了跨瀏覽器兼容性，請使用 window.pageXOffset 代替 window.scrollX。另外，舊版本的 IE（<9）兩個(gè)屬性都不支持
獲取scrollTop ,document.documentElement.scrollTop兼容非chrome瀏覽器
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
Safari、chrome阻止對在異步調(diào)用中進(jìn)行的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不重疊，同時(shí)margin與padding 在使用百分比值時(shí)候，計(jì)算時(shí)候可以有兩種標(biāo)準(zhǔn)一種是left/right根據(jù)width，top/bottom根據(jù)高度。另一種則是left/right/bottom/top都根據(jù)width，規(guī)范不強(qiáng)制約束，瀏覽器可以二選一，因此這也意味制百分比在計(jì)算數(shù)值時(shí)候在不同瀏覽器可能表現(xiàn)不同。所以margin padding不要使用百分?jǐn)?shù)。
