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

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

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

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

  <div class="bottom">
        <a href="//a.app.qq.com/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.com/u/ac4daaeecdfe