admin管理员组

文章数量:1616032

最近在做一个活动页的时候遇到一个奇怪的问题，活动页底部固定一个按钮，但是在百度浏览器打开时按钮一闪不见，而只有百度浏览器会这样。

查询资料发现，这是百度浏览器的广告屏蔽机制，会让这种固定定位在底部的元素当作广告来屏蔽掉（隐藏移除不显示）,使用position:absolute或fixed的元素都会被屏蔽掉。

解决办法：
使用伪元素的背景图片实现按钮的显示，页面元素放空标签。

  <div class="bottom">
        <a href="//a.app.qq/o/simple.jsp?pkgname=com.qxb.zwt" class="download-btn"></a>
  </div>

.bottom{
    position: absolute;
    bottom: 0;
    z-index:999;
    width: 100%;
}
.bottom .download-btn{
    position: relative;
    margin: 0 auto .2rem;
    display: block;
    width: 5.9rem;
    height:.96rem;
    line-height: .96rem;
}
.download-btn:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: .44rem;
    background-size: cover;
    background-image: url('../images/qxb/bottom_img.png');
    box-shadow: 0px 8px 10px 0px rgba(114,147,249,0.41);
}

这样在百度浏览器底下也正常显示了。
原文作者技术博客：https://www.jianshu/u/ac4daaeecdfe

本文标签： 屏蔽按钮浏览器解决方案

版权声明：本文标题：百度浏览器屏蔽H5固定在底部按钮之解决方案 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1728734504a1170768.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。