今天小编跟大家讲解下有关完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题 的相关资料,希望小伙伴们看了有所帮助。
问题描述
h5活动页面底部有个悬浮图片按钮 使用fixed悬浮定位在底部 但是在安卓端的百度浏览器下打开 却发现该图片一闪而过 在百度浏览器中消失不见。
原因
这是由于百度浏览器的广告屏蔽机制 会让这种固定定位在底部的元素当作广告来屏蔽掉(隐藏移除不显示)。
代码实现
主要用的一个空标签,就按钮图片作为背景 放在伪元素中并添加到到页面上 这样就完美解决了百度浏览器屏蔽fixed悬浮元素的问题。
css:
.foot{
display: block;
position: fixed;
max-width: 640px;
width: 100%;
bottom: 0;
}
.foot::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 1.05rem;
background-size: cover;
background-image: url('./images/chat/foot.png')
}
当然也可以使用js来实现布局问题 当页面完全渲染完成后 在给元素添加fixed的属性(之前让该元素隐藏)。
来源:爱蒂网
郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时候联系我们修改或删除,多谢。