【前端芝士树】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;
    }

相关推荐