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

YacaToy 发布于2019-08-02 11:36 / 3248人阅读

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

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

兼容性问题及解决方式

1.object-fit在ie11和edge中不兼容，可以一些css hacks
使用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执行完成后会触发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/que...

</>复制代码 
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) };

云服务器 GPU云服务器用到的几个函数云主机的几个品牌使用遇到问题布局遇到的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52997.html

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

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

JeOam 2019-08-23 12:07 评论0 收藏0
遇到的几个浏览器兼容性问题

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

isLishude 2019-08-30 15:54 评论0 收藏0
学习笔记：让元素永久置底的几种方案（css only）

摘要：我们权且把这种解决方案叫术语解释顾名思义就是使用来实现有粘性的置底元素。下面就为大家讲讲几种解决方案，以及这些解决方案的优缺点和兼容性。前言很多同学在使用css+html写页面的时候，可能会遇到这样的场景：页面除了头部和底部外，中间部分的内容为空时，页面就会出现底部向上顶，也就是头部和底部黏在一起了。最近开发页面，也遇到了这个问题，经过查阅很多文章和资料后，整理出这篇文章，希望...

caikeal 2019-08-30 13:09 评论0 收藏0
CSS 最核心的几个概念

摘要：本文将讲述中最核心的几个概念，包括盒模型等。块级元素的默认为，而内联元素则是根据其自身的内容或子元素来决定其宽度。如果该元素的下一个兄弟元素中有内联元素通常是文字，则会围绕该元素显示，形成类似文字围绕图片的效果。本文将讲述 CSS 中最核心的几个概念，包括：盒模型、position、float等。这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。为了掌握它们...

SwordFly 2019-08-28 17:51 评论0 收藏0
Python的中文编码问题

摘要：使用中文替代中文中文编码中文编码中有以上两种声明字符串变量的方式，它们的主要区别是编码格式的不同，其中，的编码格式和文件声明的编码格式一致，而的编码格式则是。字符串是Python中最常用的数据类型，而且很多时候你会用到一些不属于标准ASCII字符集的字符，这时候代码就很可能抛出UnicodeDecodeError: ascii codec cant decode byte 0xc4 ...

Cheriselalala 2019-07-31 11:35 评论0 收藏0