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

2024-06-24 11:06:32阅读量：33 字体：大 中 小

背景

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

兼容性问题及解决方式

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

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

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

上述代码中可以修改为如下：

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

可以使用如下css设置video标签，解决object-fit不兼容ie和edge的问题

2.window.onload事件会在图片等资源加载完成后执行方法，但是它不会检测视频资源是否加载完成，可以使用如下代码检测视频是否加载完成

3.css的transition执行完成后会触发transitionend事件，但是存在兼容性，可以使用下面代码解决浏览器间的兼容性

4.onwheel事件兼容性

5.wheel事件的wheelDelta和detail属性在不同浏览器下值不同，可以使用如下代码对其进行normalize

6.requestAnimationFrame兼容性

免责声明：

本文《浅谈遇到的几个浏览器兼容性问题》版权归原作者所有,内容不代表本站立场！

如本文内容影响到您的合法权益（含文章中内容、图片等），请及时联系本站，我们会及时删除处理。

推荐阅读

  • 微信注销后聊天记录还能恢复吗

    微信注销后聊天记录还能恢复吗

    如果对聊天记录进行备份或迁移的话，微信注销后聊天记录可以恢复。如果没有对聊天记录进行备份或迁移的话，微信注销后聊天记录无法恢复。以下是注销微信的操作步骤： 微信注销后聊天记录还能恢复吗 1、打开微信A...

    阅读: 757

  • 微信群太多怎么实现分组管理

    微信群太多怎么实现分组管理

    微信群太多可以使用折叠群的功能进行分组管理，将群设置为折叠群的具体操作步骤如下： 微信群太多怎么实现分组管理 1、打开微信app，点击下方的通讯录，再点击群聊进入群聊界面。 2、进入群聊界面后，选择...

    阅读: 737

  • 微信预约挂号怎样切换就诊人

    微信预约挂号怎样切换就诊人

    以梧州市中医院公众号为例，在梧州市中医院微信公众号预约挂号切换就诊人的具体操作步骤如下： 微信预约挂号怎样切换就诊人 1、打开微信APP，搜索梧州市中医院公众号”，点击该公众号，再点击发消...

    阅读: 715

  • 快手别人怎么关注不了我

    快手别人怎么关注不了我

    如果别人关注不了你的快手账号的话，可能是你开启了隐私用户”，关闭隐私账户”的具体操作方式如下： 快手别人怎么关注不了我 1、打开快手，点击左上角的三条横线”，进入功...

    阅读: 748

  • 微信一打就是对方忙是不是设置了

    微信一打就是对方忙是不是设置了

    微信一打就是对方忙不是设置了，因为无法设置。打微信电话提示对方忙”有以下两种情况：1、对方在忙线，正在与别人打微信或者视频电话。2、对方不想接听电话，选择挂断。以下是拨打微信语音电话的具体...

    阅读: 641

  • 怎么约顺风车

    怎么约顺风车

    顺风车是在21世纪比较流行的词语，是指搭便车、顺路车、拼车的意思。以下是约顺风车的具体操作方法： 怎么约顺风车 1、打开微信，点击我”-服务”-滴滴出行”，进入该界...

    阅读: 663

热门文章

最近更新