前言
由于经常需要跟IE11打交道（虽然文章发表时，IE11已经正式宣布退役了），原因是安防监控视频播放需要调用activeX控件。所以将自己的一些经验总结下。
原则
- 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
元标签
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<![endif]-->如果你跟我一样只用兼容IE11，其实这个标签带不带无所谓（毕竟客户也只用IE11）。一般只要兼容IE8、9的倒霉蛋才会去了解这个标签（滑稽）。更多看这个回答。
IE11 CSS hack
IE11各种奇葩的样式问题，都离不开CSS hack。
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, :root .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>实际情况是，我只会用到@media all and (-ms-high-contrast:none)这个媒体查询，因为我只需要兼容IE11，同时将所有兼容样式保存在单独一个文件，确保样式隔离和代码复用。
更多IE相关的CSS hack写法可以查看这个stackoverflow回答。
如果你遇到兼容IE11以下的版本，建议你提桶跑路（滑稽）
在IE11中，往往意味着CSS3很多特性是不支持的，你需要特别谨慎，比如一些UI库，部分组件使用了比较新的CSS特性，这都会给你的开发带来隐藏的缺陷，这也是技术选型的重要影响因素。
CSS reset
CSS reset 方案， 虽然这个库很久没更新维护了，不过基本不影响使用。
查询特性是否支持
大部分兼容性API你都可以通过上面2个网站去查询，简单举2个例子（没办法通过构建工具实现兼容）：
- IE11 不支持 CSS
initial属性值
text-align: initial; // IE不会生效这个我曾经在Element框架上遇到，算是小坑，只能独立做样式兼容。像这样的一些属性还有很多，但有一说一，IE11对样式兼容性已经算是友好了。
- IE11 crypto 需要带ms前缀
var crypto = crypto || msCryptoIE11支持某些特定api，但需要带特定的ms前缀，基本上构建工具没办法帮你做到，只能你自己手动实现兼容。
Canva
插入图片尽量避免使用SVG格式，建议使用PNG格式替代，我至今没有找到解决方案。
IE11 滚动条样式
IE没办法改变滚动条的宽度，如果有这个需求，请使用第三方库。
body{
scrollbar-base-color: #000;
scrollbar-face-color: #000;
scrollbar-3dlight-color: #000;
scrollbar-highlight-color: #000;
scrollbar-track-color: #000;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #000;
scrollbar-dark-shadow-color: #000;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。