【前端芝士树】IE 静态页兼容指南
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 会破坏动画。
解决方法
让 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; }
相关推荐
MaureenChen 2014-05-28
jjddrushi 2019-12-27
中等偏下 2015-07-17
nemunemu 2018-02-01
80437916 2020-04-11
WinerChopin 2020-03-03
程序员俱乐部 2020-02-21
cfang00 2013-05-15
流年浅滩 2015-06-14
囧芝麻 2019-12-28
Safari浏览器 2019-12-23
Safari浏览器 2019-12-11
letheashura 2019-12-03
宇智波鼬 2014-01-20
89357940 2014-01-14
Teresasmida 2014-01-10