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 的动画效果
解决方法
让 css 按顺序处理
浏览器的 UI 线程在处理 UI 操作时，将多个 css 属性的 set 操作加入在同一个 tick 中处理。如果在两个 css 属性的 set 操作中间插入 get 操作，UI 线程在处理的时候将会按顺序执行。
container.css(“display”, “block”);
container.css(“display”);
container.css(“opacity”, “1”);
使用 setTimeout 来 hack 这个问题
本质上也是改变了 set 操作的顺序，只是 delay 的值在不同浏览器下需要选取的值也不同
container.css(“display”, “block”);
setTimeout(function() {
container.css(“opacity”, “1”);
}, delay);
通过 window.requestAnimationFrame 来实现
container.css(“display”, “block”);
requestanimationframe(function() {
container.css(“opacity”, “1”);
});
通过控制元素的显示隐藏来避开 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;
}