背景

在做这样一个活动页时，发现底部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

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

html百度转到顶部 fixed,科技常识：完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题...
今天小编跟大家讲解下有关完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题的相关资料 ...
移动端ios使用fixed定位，偶现元素不显示问题（百度浏览器）
项目场景: 最近在做h5下载页,底部有一个下载按钮,平时遇到这种需求首先想到的就是position: fixed;,但是发现在ios手机上用百度浏览器打开以后,按钮会出现不显示想象,感觉很奇怪.微信浏 ...
【CSS进阶】巧用伪元素before和after制作绚丽效果
原创:叫我詹躲躲来源:掘金链接:巧用伪元素before和after制作绚丽效果所谓'伪元素',就是本身不存在的页面元素,HTML代码里并没有这样的元素,但在页面显示时,你却能看到这些本来不存在的 ...
巧用伪元素和伪类让我们的html结构更清晰合理
css3为了区分伪类和伪元素,伪元素采用双冒号写法. 伪类 -- :hover, :link, :active, :visited, :first-child, :last-child, nth-ch ...
[css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法
[css] 父元素下有子元素,子元素也有高度但父元素的高度为何为0呢?分析下可能出现的原因及解决方法父元素塌陷父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度 ...
html 内容不被父级包住,解决：父级元素不能被子元素内容撑开的解决办法，父级元素没有高度的解决办法...
问题父级元素不能被子元素内容撑开的解决办法,父级元素没有高度的解决办法. 今天在写网页时遇到如下图问题,解决问题后自己做个随笔,希望帮到更多的学前端的童鞋! 问题图片问题描述最外层的不能自适应高 ...
html 原生弹出框,html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果...
模态框: html部分: 弹出框 hhhhh 取消确认 css部分: #box{ width: 80px; height: 40px; background: #fd7430; border:non ...
html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果...
模态框: html部分: <button id="box" onclick="pop_box()">弹出框< ...
解决子元素浮动造成父元素高度塌陷的问题学习总结
解决子元素浮动造成父元素高度塌陷的问题的几种方法与BFC原理简释一.解决子元素浮动造成父元素高度塌陷的问题的4种方法 1.直接给父元素设置高度,在子元素改变的情况下,此方法使用起来比较繁杂. 2.给 ...

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

背景