前言
由於經常需要跟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
- normalize.css
CSS reset 方案， 雖然這個庫很久沒更新維護了，不過基本不影響使用。
查詢特性是否支持
- caniuse
- MDN
大部分兼容性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;
}參考文章
- 瀏覽器的兼容問題及解決方案整理（建議收藏）
