背景
解決瀏覽器的兼容性問(wèn)題是一件很煩的事情，其中并沒(méi)有太多高深的技巧，但是開(kāi)發(fā)需要，也不得不去解決它，最近在開(kāi)發(fā)項(xiàng)目中也遇到一些兼容性的問(wèn)題，希望把這些問(wèn)題的解決方式記錄下來(lái)，下次遇到就直接拿過(guò)來(lái)用，也希望對(duì)他人有一些幫助。
兼容性問(wèn)題及解決方式
1.object-fit在ie11和edge中不兼容，可以一些css hacks
使用background-size和background-position替換object-fit設(shè)置圖片的樣式
| <img class="loadingImage" src="url"/>.loadingImage { width: 100%; height: 100%; transition: all 1s ease; object-fit: cover; } |
上述代碼中可以修改為如下：
| <div class="loadingImage"></div>.loadingImage { width: 100%; height: 100%; background-size: cover; background-position: center; background-image: url(url);} |
對(duì)于視頻播放，object-fit:cover可以解決視頻不會(huì)隨著屏幕縮放的問(wèn)題
| <video class="video"></video>.video { width: 100%; height: auto; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: cover;} |
可以使用如下css設(shè)置video標(biāo)簽，解決object-fit不兼容ie和edge的問(wèn)題
| <video class="video"></video>.video { width: 100%; height: auto; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: fill;} |
2.window.onload事件會(huì)在圖片等資源加載完成后執(zhí)行方法，但是它不會(huì)檢測(cè)視頻資源是否加載完成，可以使用如下代碼檢測(cè)視頻是否加載完成
| <video id="video"></video>let video = document.getElementById('video')if (video.readyState === 4) { console.log('finish!')} |
3.css的transition執(zhí)行完成后會(huì)觸發(fā)transitionend事件，但是存在兼容性，可以使用下面代碼解決瀏覽器間的兼容性
| function checkTransitionEvent() { var el = document.createElement('div') var transitions = { 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' } for(t in transitions){ if( el.style[t] !== undefined ){ return transitions[t]; } }} |
4.onwheel事件兼容性
| support() { let support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel" document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel" "DOMMouseScroll"; return support}, |
5.wheel事件的wheelDelta和detail屬性在不同瀏覽器下值不同，可以使用如下代碼對(duì)其進(jìn)行normalize,參考https://stackoverflow.com/questions/5527601/normalizing-mousewheel-speed-across-browsers
新聞熱點(diǎn)
疑難解答
圖片精選
