浅谈遇到的几个浏览器兼容性问题针对IE浏览器的兼容问题小结避免不必要的浏览器兼容性问题的5个技巧兼容主流浏览器的CSS透明代码(必看篇)浅谈浏览器的兼容性(必看篇)关于遇到的浏览器兼容问题及应对方法(推荐)

 .loadingImage { width: 100%; height: 100%; transition: all 1s ease; object-fit: cover; } 

 .loadingImage { width: 100%; height: 100%; background-size: cover; background-position: center; background-image: url(url); } 

 .video { width: 100%; height: auto; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: cover; } 

 .video { width: 100%; height: auto; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: fill; } 

 let video = document.getElementById('video') if (video.readyState === 4) { console.log('finish!') } 

 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]; } } } 

 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 }, 

 var wheelDistance = function(evt){ if (!evt) evt = event; var w=evt.wheelDelta, d=evt.detail; if (d){ if (w) return w/d/40*d>0?1:-1; // Opera else return -d/3; // Firefox; TODO: do not /3 for OS X } else return w/120; // IE/Safari/Chrome TODO: /3 for Chrome OS X }; var wheelDirection = function(evt){ if (!evt) evt = event; return (evt.detail<0) ? 1 : (evt.wheelDelta>0) ? 1 : -1; }; 

 let cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || function(id) { clearTimeout(id) }; let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { return setTimeout(callback, 1000 / 60) };