百度浏览器屏蔽H5固定在底部按钮之解决方案

最近在做一个活动页的时候遇到一个奇怪的问题，活动页底部固定一个按钮，但是在百度浏览器打开时按钮一闪不见，而只有百度浏览器会这样。 查询资料发现，这是百度浏览器的广告屏蔽机制，会让这种固定定位在底部的元素当作广告来屏蔽掉（隐藏移除不显示）,使用position:absolute或fixed的元素都会被屏蔽掉。 解决办法： 使用伪元素的背景图片实现按钮的显示，页面元素放空标签。 .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.com/u/ac4daaeecdfe

本文章由javascript技术分享原创和收集