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 會破壞動畫。

關於 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;
   }