专栏首页一只想做全栈的猫【前端芝士树】IE 静态页兼容指南

【前端芝士树】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 的 animationtransitiontransform 不支持 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; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Angular6+】属性及样式绑定

    借助 CSS 类绑定,可以从元素的 class attribute 上添加和移除 CSS 类名。

    CloudCat
  • 【Angular】Angular 与 AngularJs 之间的纠缠不清

    Marketing/Branding 部分其实只是单纯的设定,不需要逻辑,所以记住就好。

    CloudCat
  • 【Angular6+】事件绑定

    添加如下 onSelect() 方法,它会把模板中被点击的英雄赋值给组件的 selectedHero 属性。

    CloudCat
  • Java大学问——优雅地处理异常

    你有没有这样的印象,当你想要更新一款 APP 的时候,它的更新日志里总有这么一两句描述:

    本人秃顶程序员
  • 【因子后花园】一个显著的新因子:现金循环周期(CCC)

    我们将对量化因子进行一个全方位的介绍与挖掘。并且结合众多机构人士一起,把这个专题做好、做精!

    量化投资与机器学习微信公众号
  • circR2Disease:疾病相关的环状RNA数据库

    从名称可以看出,circR2Disease是一个疾病相关的环状RNA数据库,网址如下

    生信修炼手册
  • [前端]css前端样式的模块化

    陶士涵
  • Jenkins部署码云SpringBoot项目到远程服务器

    这里需要在 系统管理->系统设置->Publish over SSH配置远程部署的服务器,如图:

    dalaoyang
  • Go语言指针访问结构体的方法

    Go有指针,但是没有指针运算。 结构体字段可以通过结构体指针来访问。通过指针间接的访问是透明的。 package main import "fmt" type...

    李海彬
  • 百度宣布开放自动驾驶平台,陆奇的第一把火能烧起来吗?

    4月19日消息,百度发布一项名为“Apollo”的新计划,将向汽车行业及自动驾驶领域的合作伙伴提供一个开放、完整、安全的软件平台,帮助他们结合车辆和硬件系统,快...

    机器人网

扫码关注云+社区

领取腾讯云代金券