背景:vue在ie11和360兼容模式下打开,页面显示空白页
解决办法:亲测有效
npm install core-js
main.js中引入
import 'core-js/stable'
import 'regenerator-runtime/runtime'
babel.config.js中加入
presets: [
'@vue/cli-plugin-babel/preset',
[
'@babel/preset-env',
{
useBuiltIns: 'entry',
corejs: 3
}
]
],
通过以上代码即可解决,除此外还有一些其他不兼容的地方
ie11不支持以下代码生成的视频
<template>
<video width="100%" autoplay muted loop>
<source src="../../../assets/images/pc_cn.mp4" type="video/mp4" />
您的浏览器不支持 video 标签。
</video>
</template>
<style scoped lang="scss">
video {
object-fit: cover;
height: calc(100vh - 128px);
margin-bottom: -23px;
}
</style>
解决办法,直接使用video标签代替,删除里面的source标签
<video
src="网络路径"
autoplay
muted
loop
id="cover-video"
></video>
如果依旧不支持可以使用以下代码
<template>
<div>
<object
width="100%"
:height="height"
data="视频地址"
>
<param name="movie" value="video.swf" />
<param name="allowFullScreen" value="true" />
<param name="flashvars" value="video=video.mp4" />
<embed
src="视频地址"
type="application/x-shockwave-flash"
allowfullscreen="true"
flashvars="video=video.mp4"
width="100%"
:height="height"
/>
</object>
</div>
</template>
<script>
export default {
data() {
return {
height: 300
};
}
};
</script>
ie11不支持object-fit: cover;样式
解决办法,判端ie11和360兼容模式下设置video高为100%或者auto
const ua = window.navigator.userAgent.toLowerCase()
const new_ie = ua.indexOf('trident/')
//兼容ie11和360兼容模式
if (window.navigator.mimeTypes[40] || !window.navigator.mimeTypes.length || new_ie !== -1) {
const video = document.getElementById('cover-video')
video.style.height = 'auto'
}
ie11不支持position: sticky;样式
解决办法,监听窗口滚动,定位元素滚动到顶部时添加绝对定位的class,不在顶部时移除该class
<div class="menu-box" id="sticky-element">
<div class="u-flex u-row-between">
<div
@click="toMenu(item.id)"
class="menu"
:class="current === item.id ? 'act' : ''"
v-for="item in menuList"
:key="item.title"
>
{{ item.title }}
</div>
</div>
</div>
export default {
data() {
return {
stickyElement: null,
stickyOffset: 0
}
},
mounted() {
this.stickyElement = document.getElementById('sticky-element')
this.stickyOffset = this.stickyElement.offsetTop
window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
},
methods: {
handleScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
const ua = window.navigator.userAgent.toLowerCase()
const new_ie = ua.indexOf('trident/')
//兼容ie11和360兼容模式
if (window.navigator.mimeTypes[40] || !window.navigator.mimeTypes.length || new_ie !== -1) {
if (window.pageYOffset >= this.stickyOffset) {
this.stickyElement.classList.add('sticky')
} else {
this.stickyElement.classList.remove('sticky')
}
}
}
},
//由于是在整个window中添加的事件,所以要在页面离开时摧毁掉,否则会报错
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll)
}
}
<style scoped lang="scss">
.sticky {
position: fixed;
top: 0;
}
.menu-box {
position: sticky;
z-index: 999;
top: 0;
background-color: #ffffff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
width: 100%;
}
</style>
ie11不支持window.scrollTo
解决办法,判断是否支持scrollTo,不支持使用scrollIntoView()
const el = document.getElementById(id)
const isSmoothScrollSupported = 'scrollBehavior' in document.documentElement.style
if (isSmoothScrollSupported) {
window.scrollTo({ top: el.offsetTop, behavior: 'smooth' })
} else {
el.scrollIntoView()
}