【前端芝士樹】IE 靜態頁兼容指南

SwordFly 發布于2019-08-23 14:58 / 2308人閱讀

摘要：靜態頁兼容指南下的網頁字符亂碼問題原因這個可能是網頁沒有設置編碼造成。圖標會瞬間顯示出來，但是卻沒有動畫或者過渡效果。問題解析暫時理解為的不支持的改變，直接操作會破壞動畫。如果在兩個屬性的操作中間插入操作，線程在處理的時候將會按順序執行。

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兼容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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