问题描述

 h5活动页面底部有个悬浮图片按钮，使用fixed悬浮定位在底部，但是在安卓端的百度浏览器下打开，却发现该图片一闪而过，在百度浏览器中消失不见。 

原因 

这是由于百度浏览器的广告屏蔽机制，会让这种固定定位在底部的元素当作广告来屏蔽掉（隐藏移除不显示）。

代码实现

主要用的一个空标签,就按钮图片作为背景，放在伪元素中并添加到到页面上，这样就完美解决了百度浏览器屏蔽fixed悬浮元素的问题。

html：

<a href="javascript:void(0);" class="foot" onclick="href()">	
</a>

css：

<style>
.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')
	}
</style>

当然也可以使用js来实现布局问题，当页面完全渲染完成后，在给元素添加fixed的属性(之前让该元素隐藏)。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/4203