高志军

今天小编跟大家讲解下有关浅谈遇到的几个浏览器兼容性问题 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关浅谈遇到的几个浏览器兼容性问题 的相关资料，希望小伙伴们看了有所帮助。

背景

解决浏览器的兼容性问题是一件很烦的事情 其中并没有太多高深的技巧 但是开发需要 也不得不去解决它 最近在开发项目中也遇到一些兼容性的问题 希望把这些问题的解决方式记录下来 下次遇到就直接拿过来用 也希望对他人有一些帮助。

兼容性问题及解决方式

1.object-fit在ie11和edge中不兼容 可以一些css hacks

使用background-size和background-position替换object-fit设置图片的样式

<img class="loadingImage" src=http://xyrl.com/skin/7ke/image/nopic.gif { 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);}

对于视频播放 object-fit:cover可以解决视频不会随着屏幕缩放的问题

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

可以使用如下css设置video标签 解决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事件会在图片等资源加载完成后执行方法 但是它不会检测视频资源是否加载完成 可以使用如下代码检测视频是否加载完成

<video id="video"></video>let video = document.getElementById('video')if (video.readyState === 4) { console.log('finish!')}

3.css的transition执行完成后会触发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属性在不同浏览器下值不同 可以使用如下代码对其进行normalize,参考https://stackoverflow.com/questions/5527601/normalizing-mousewheel-speed-across-browsers

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

6.requestAnimationframe兼容性

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

以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。

来源：爱蒂网