IE 静态页兼容指南

1. IE 下的网页字符乱码

题目缘由：

这个多是网页没有设置 meta charset 编码形成。

解决方法：

增加以下代码

<meta charset="UTF-8" />

2. IE 下的 field 禁用失效

解决方法

将 disabled 写在 input 上

<input type="text" class="form-control" id="name" placeholder="姓名" disabled />

3. IE 下的 onclick 失效

题目形貌

以下代码，点击时报错，显现函数未定义

<button type="button" class="btn" id="getCode" onclick="getCode()"></button>

解决方案

改成在 js 写事宜监听

$("#getCodeBtn").on("click", function() {
  getCode();
});

4. IE 下面的 animation 动画失效

题目形貌

运用 font-awesome 的动画时（loading 结果），倘使用 display 掌握显隐，则在 IE 下会表现非常。
图标会霎时显现出来，然则却没有动画或许过渡结果。

题目剖析

临时明白为 CSS3 的 animation、transition、transform 不支撑 display 的转变，直接操纵 display 会损坏动画。

关于
display 为什么会损坏 css 动画，现在个人明白是，display 的操纵会触发浏览器的 reflow 操纵，而 transition 支撑的结果只是触发浏览器的 repaint 操纵，回到上面的 demo，假如我们经由过程 visibility 属性来掌握显现与隐蔽，则不会损坏 transition 的结果。所以，能够临时这么以为：reflow 与 repaint 的混合会损坏 transition 的动画结果

解决方法

1. 让 css 按递次处置惩罚

   浏览器的 UI 线程在处置惩罚 UI 操纵时，将多个 css 属性的 set 操纵到场在同一个 tick 中处置惩罚。假如在两个 css 属性的 set 操纵中心插进去 get 操纵，UI 线程在处置惩罚的时刻将会按递次实行。

   container.css("display", "block");
   container.css("display");
   container.css("opacity", "1");

2. 运用setTimeout来 hack 这个题目

   本质上也是转变了 set 操纵的递次，只是 delay 的值在差别浏览器下须要拔取的值也差别

   container.css("display", "block");
   setTimeout(function() {
     container.css("opacity", "1");
   }, delay);

3. 经由过程window.requestAnimationFrame来完成

   container.css("display", "block");
   requestanimationframe(function() {
     container.css("opacity", "1");
   });

4. 经由过程掌握元素的显现隐蔽来避开 display 的操纵

   i.fa {
     // display: none;
     width: 0;
     opacity: 0;
   }
   &.loading {
     i.fa {
       // display: inline-block;
       margin-left: 10px;
       width: 1em;
       opacity: 1;
     }
   }

   隐蔽也能够经由过程如以下款式来完成

   i {
     position: absolute;
     display: block;
     height: 0;
     padding: 0;
     margin: 0;
   }