【前端芝士树】IE 静态页兼容指南

SwordFly 发布于2019-08-23 14:58 / 2305人阅读

摘要：静态页兼容指南下的网页字符乱码问题原因这个可能是网页没有设置编码造成。图标会瞬间显示出来，但是却没有动画或者过渡效果。问题解析暂时理解为的不支持的改变，直接操作会破坏动画。如果在两个属性的操作中间插入操作，线程在处理的时候将会按顺序执行。

IE 静态页兼容指南 1. IE 下的网页字符乱码 问题原因：

这个可能是网页没有设置 meta charset 编码造成。

解决方法：

添加如下代码

2. IE 下的 field 禁用失效 解决方法

将 disabled 写在 input 上

3. IE 下的 onclick 失效 问题描述

如下代码，点击时报错，显示函数未定义

解决方案

改成在 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;
}

GPU云服务器云服务器 ie兼容 ie不兼容 ie10兼容模式 IE6兼容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101428.html

【前端芝士树】IE 静态页兼容指南

摘要：静态页兼容指南下的网页字符乱码问题原因这个可能是网页没有设置编码造成。图标会瞬间显示出来，但是却没有动画或者过渡效果。问题解析暂时理解为的不支持的改变，直接操作会破坏动画。如果在两个属性的操作中间插入操作，线程在处理的时候将会按顺序执行。 IE 静态页兼容指南 1. IE 下的网页字符乱码问题原因：这个可能是网页没有设置 meta charset 编码造成。解决方法：添加如下代...

beita 2019-08-30 15:55 评论0 收藏0
【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

摘要：提供了糟糕的支持，而虽然接近标准，但依旧未能完全正确的支持标准。尽管修复了许多的问题，但是依然延续实现中的其它故障主要是盒模型问题。因此大部分的声明将触发严格模式即依据标准的规则渲染网页。深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始，一步步涉及一些常见的前端笔试和面试点主要参考自第一篇文章，然而笔者在读的时...

binta 2019-08-29 16:13 评论0 收藏0
【前端芝士树】Array的属性及方法整理（参照MDN）

摘要：本文主要是我自己对的一些整理，参考自，其中的分类有些不准确之处，还望见谅的基本属性属性的一些方法增删改查基础功能增删改查基础功能增删改删除数组的第一个元素删除数组的最后一个元素在数组的开头一个或多个元素，在数组的末尾增加一个或者多个元素数组本文主要是我自己对Array的一些整理，参考自MDN，其中的分类有些不准确之处，还望见谅 Array const arr = [1, 2, 3, ...

MoAir 2019-08-23 16:15 评论0 收藏0