巧用伪元素解决fixed元素被百度浏览器屏蔽问题

背景

在做这样一个活动页时，发现底部fixed定位的 button 元素在百度浏览器中展示不出来。

Google后发现了这位小伙伴的文章 针对前端在百度浏览器总的固定定位的问题

文中提到：

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

并给出了他的解决方案：

底部不要100%宽度，且不要为一张图片; 还可以通过（高度未超屏）position：absolute 来实现相同效果或采用js来实现布局效果 （场景较少）

目前网上看到的方法都是在元素width上做文章，感觉都不太好用（会在最后的其他方法中细说）。

本次分享为提供一个新思路：伪元素大法！

伪元素大法(推荐!!)

html

原代码结构

<div class="bottom_wrap">
    <div class="btn" @click="handleBtn">
        我是业主, 我要申请找房
    </div>
</div>
复制代码

新代码结构

<div class="btn_fixed" @click="handleBtn"></div>
复制代码

思路

btn_fixed 就是一个空 div, 将按钮切图后，作为伪元素添加到页面中。这样就能完美避开被百度浏览器广告机制的屏蔽了~

新的样式为

 .btn_fixed {
    position: fixed;
    bottom: 0;
    left: 0;
}
.btn_fixed::after {
    content: '.';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 21vw;
    background-size: cover;
    background-image: url('./images/btn_fixed.png')
}
复制代码

一些其它方案

网上还看到了一些其他方案，感觉都不太好用。

改变宽度法(丑)

有一种思路是给固定定位的图片 width 设置为 99%

(文章地址: 手机百度APP H5网页position:fixed属性失效. DIV结构被自动隐藏)，

此前,直接对img加了一个width:100%;的属性. 后来经过不断地尝试.发现只要图片不是宽度100%,手机百度则不会把它当做广告屏蔽掉. 所以只需要对img改变一下宽度如99%即可. 或者不使用整个大图片

但经测试，发现如今图片宽度哪怕是 90% 也依然会被屏蔽，猜想百度浏览器的广告机制又做了升级，扩大了过滤范围。

然而 width 太小，明显太丑难以过UI那关

改进: 宽度设置百分比，transfrom 缩放（失败）

于是想到设置宽度为 80%, 再通过 transfrom: scale(1.25, 1.25) 去进行缩放

嗯，结果又被百度屏蔽了……失败。

后续

灵机一动，想到了使用伪元素来解决，于是有了上述的【伪元素大法】~ 独家原创，亲测好用，希望可以帮到大家~

转载于:https://juejin.im/post/5cd3a38bf265da036f4e99b1