資訊專欄INFORMATION COLUMN
摘要：靜態(tài)頁兼容指南下的網(wǎng)頁字符亂碼問題原因這個(gè)可能是網(wǎng)頁沒有設(shè)置編碼造成。圖標(biāo)會(huì)瞬間顯示出來，但是卻沒有動(dòng)畫或者過渡效果。問題解析暫時(shí)理解為的不支持的改變，直接操作會(huì)破壞動(dòng)畫。如果在兩個(gè)屬性的操作中間插入操作，線程在處理的時(shí)候?qū)?huì)按順序執(zhí)行。
IE 靜態(tài)頁兼容指南 1. IE 下的網(wǎng)頁字符亂碼 問題原因：
這個(gè)可能是網(wǎng)頁沒有設(shè)置 meta charset 編碼造成。
解決方法：添加如下代碼
2. IE 下的 field 禁用失效 解決方法將 disabled 寫在 input 上
3. IE 下的 onclick 失效 問題描述如下代碼，點(diǎn)擊時(shí)報(bào)錯(cuò)，顯示函數(shù)未定義
解決方案改成在 js 寫事件監(jiān)聽
$("#getCodeBtn").on("click", function() {
getCode();
});
4. IE 下面的 animation 動(dòng)畫失效
問題描述
使用 font-awesome 的動(dòng)畫時(shí)（loading 效果），倘若用 display 控制顯隱，則在 IE 下會(huì)表現(xiàn)異常。
圖標(biāo)會(huì)瞬間顯示出來，但是卻沒有動(dòng)畫或者過渡效果。
暫時(shí)理解為 CSS3 的 animation、transition、transform 不支持 display 的改變，直接操作 display 會(huì)破壞動(dòng)畫。
關(guān)于 display 為何會(huì)破壞 css 動(dòng)畫，目前個(gè)人理解是，display 的操作會(huì)觸發(fā)瀏覽器的 reflow 操作，而 transition 支持的效果只是觸發(fā)瀏覽器的 repaint 操作，回到上面的 demo，如果我們通過 visibility 屬性來控制顯示與隱藏，則不會(huì)破壞 transition 的效果。所以，可以暫時(shí)這么認(rèn)為：reflow 與 repaint 的混合會(huì)破壞 transition 的動(dòng)畫效果解決方法
讓 css 按順序處理
瀏覽器的 UI 線程在處理 UI 操作時(shí)，將多個(gè) css 屬性的 set 操作加入在同一個(gè) tick 中處理。如果在兩個(gè) css 屬性的 set 操作中間插入 get 操作，UI 線程在處理的時(shí)候?qū)?huì)按順序執(zhí)行。
container.css("display", "block");
container.css("display");
container.css("opacity", "1");
使用setTimeout來 hack 這個(gè)問題
本質(zhì)上也是改變了 set 操作的順序，只是 delay 的值在不同瀏覽器下需要選取的值也不同
container.css("display", "block");
setTimeout(function() {
container.css("opacity", "1");
}, delay);
通過window.requestAnimationFrame來實(shí)現(xiàn)
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;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117308.html
摘要：靜態(tài)頁兼容指南下的網(wǎng)頁字符亂碼問題原因這個(gè)可能是網(wǎng)頁沒有設(shè)置編碼造成。圖標(biāo)會(huì)瞬間顯示出來，但是卻沒有動(dòng)畫或者過渡效果。問題解析暫時(shí)理解為的不支持的改變，直接操作會(huì)破壞動(dòng)畫。如果在兩個(gè)屬性的操作中間插入操作，線程在處理的時(shí)候?qū)?huì)按順序執(zhí)行。 IE 靜態(tài)頁兼容指南 1. IE 下的網(wǎng)頁字符亂碼 問題原因： 這個(gè)可能是網(wǎng)頁沒有設(shè)置 meta charset 編碼造成。 解決方法： 添加如下代...
摘要：提供了糟糕的支持，而雖然接近標(biāo)準(zhǔn)，但依舊未能完全正確的支持標(biāo)準(zhǔn)。盡管修復(fù)了許多的問題，但是依然延續(xù)實(shí)現(xiàn)中的其它故障主要是盒模型問題。因此大部分的聲明將觸發(fā)嚴(yán)格模式即依據(jù)標(biāo)準(zhǔn)的規(guī)則渲染網(wǎng)頁。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點(diǎn) 主要參考自第一篇文章，然而筆者在讀的時(shí)...
摘要：本文主要是我自己對(duì)的一些整理，參考自，其中的分類有些不準(zhǔn)確之處，還望見諒的基本屬性屬性的一些方法增刪改查基礎(chǔ)功能增刪改查基礎(chǔ)功能增刪改刪除數(shù)組的第一個(gè)元素刪除數(shù)組的最后一個(gè)元素在數(shù)組的開頭一個(gè)或多個(gè)元素，在數(shù)組的末尾增加一個(gè)或者多個(gè)元素?cái)?shù)組 本文主要是我自己對(duì)Array的一些整理，參考自MDN，其中的分類有些不準(zhǔn)確之處，還望見諒 Array const arr = [1, 2, 3, ...
閱讀 881·2021-10-25 09:45
閱讀 3308·2021-09-22 14:58
閱讀 3862·2021-08-31 09:43
閱讀 928·2019-08-30 15:55
閱讀 929·2019-08-29 13:51
閱讀 1238·2019-08-29 13:02
閱讀 3495·2019-08-29 12:52
閱讀 1969·2019-08-26 13:27
