css3兼容性问题-遇到的几个浏览器兼容性问题

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

摘要：背景：解决浏览器兼容性问题是一件很烦人的事情。 高深的方法不多，而且发展需要，我们得去解决。 最近，我们在开发项目中也遇到了一些兼容性问题。 问题，希望记录一下此类问题的解决方案，上次遇到的时候直接使用，希望对其他人有一些帮助。

背景

解决浏览器兼容性问题是一件很烦人的事情。 高深的方法不多，还得解决发展需求。 最近我在开发项目中也遇到了一些兼容性问题。 希望记录一下此类问题的解决方案css3兼容性问题，上次遇到的时候直接使用，希望对其他人有一些帮助。

兼容性问题及解决方案

1. object-fit在ie11和edge中不兼容css3兼容性问题，可以使用一些csshacks

使用background-size和background-position代替object-fit来设置图片的风格

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

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

.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 {
  width: 100%;
  height: auto;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: fill;
}

2.window.onload会在图片等资源加载完毕后执行，不会检查视频资源是否加载。 您可以使用以下代码来检查视频资源是否加载。

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

3、css的transition执行后，会触发transitionendstorm，有兼容性。 可以使用下面的代码来解决浏览器之间的兼容性

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. 轮子风暴的wheelDelta和detail属性在不同浏览器中具有不同的值。 您可以使用以下代码来规范它们。 参考

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.detail0) ? 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) };