关于ie11:IE11兼容

因为常常须要跟 IE11 打交道（尽管文章发表时，IE11 曾经正式发表服役了），起因是安防监控视频播放须要调用 activeX 控件。所以将本人的一些经验总结下。

渐进加强：针对低版本浏览器进行构建页面，保障最根本的性能，而后再针对高级浏览器进行成果、交互等改良和追加性能达到更好的用户体验。
优雅降级：一开始就构建残缺的性能，而后再针对低版本浏览器进行兼容。优雅降级：一开始就构建残缺的性能，而后再针对低版本浏览器进行兼容。

<!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<![endif]-->

如果你跟我一样只用兼容 IE11，其实这个标签带不带无所谓（毕竟客户也只用 IE11）。个别只有兼容 IE8、9 的倒霉蛋才会去理解这个标签（滑稽）。更多看这个答复。

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 个性，这都会给你的开发带来暗藏的缺点，这也是技术选型的重要影响因素。

normalize.css

CSS reset 计划，尽管这个库很久没更新保护了，不过根本不影响应用。

caniuse
MDN

大部分兼容性 API 你都能够通过下面 2 个网站去查问，简略举 2 个例子（没方法通过构建工具实现兼容）：

IE11 不反对 CSS initial属性值

text-align: initial; // IE 不会失效

这个我已经在 Element 框架上遇到，算是小坑，只能独立做款式兼容。像这样的一些属性还有很多，但有一说一，IE11 对款式兼容性曾经算是敌对了。

IE11 crypto 须要带 ms 前缀

var crypto = crypto || msCrypto

IE11 反对某些特定 api，但须要带特定的 ms 前缀，基本上构建工具没方法帮你做到，只能你本人手动实现兼容。

插入图片尽量避免应用 SVG 格局，倡议应用 PNG 格局代替，我至今没有找到解决方案。

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;
}

浏览器的兼容问题及解决方案整顿（倡议珍藏）

关于ie11:IE11兼容

前言

准则

元标签

IE11 CSS hack

CSS reset

查问个性是否反对

Canva

IE11 滚动条款式

参考文章