背景

解決瀏覽器的兼容性問題是一件很煩的事情，其中并沒有太多高深的技巧，但是開發(fā)需要，也不得不去解決它，最近在開發(fā)項(xiàng)目中也遇到一些兼容性的問題，希望把這些問題的解決方式記錄下來，下次遇到就直接拿過來用，也希望對(duì)他人有一些幫助。

兼容性問題及解決方式

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ì)隨著屏幕縮放的問題

<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的問題

<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事件兼容性