完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题

时间: 2019-07-17阅读: 2182标签: 浏览器

问题描述

 h5活动页面底部有个悬浮图片按钮,使用fixed悬浮定位在底部,但是在安卓端的百度浏览器下打开,却发现该图片一闪而过,在百度浏览器中消失不见。 


原因 

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


代码实现

主要用的一个空标签,就按钮图片作为背景,放在伪元素中并添加到到页面上,这样就完美解决了百度浏览器屏蔽fixed悬浮元素的问题。

html

<a href="JavaScript:void(0);" class="foot" onclick="href()">	
</a>

css

<style>
.foot{
   display: block;
   position: fixed;
   max-width: 640px;
   width: 100%;
   bottom: 0;
}
.foot::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 1.05rem;
    background-size: cover;
    background-image: url('./images/chat/foot.png')
	}
</style>

当然也可以使用js来实现布局问题,当页面完全渲染完成后,在给元素添加fixed的属性(之前让该元素隐藏)。


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/4203

浏览器工作原理学习笔记

DOM:渲染引擎解析 HTML 文档,构建 DOM Tree,Computed Style:解析对应的 CSS 样式信息,生成 document.styleSheets,计算 DOM 样式,布局(reflow/layout):计算布局信息,生成布局树 LayoutTree

浏览器内核分类

五大浏览器:IE、Firefox、Chrome、Safari和Opera。渲染引擎 它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机

浏览器会内置类react框架

从Prototype.js到风靡全球的jQuery.js,都是在解决浏览器间DOM操作的差异化问题,同时也提供了简洁友好的API,但是随着标准的不断的推进,现在浏览器间的差异化可以说已经没有了

用JavaScript检测当前浏览器是无头浏览器

无头浏览器是指可以在图形界面情况下运行的浏览器。我可以通过编程来控制无头浏览器自动执行各种任务,比如做测试,给网页截屏等。

如何处理浏览器的断网情况?

好的断网处理会让人很舒适:lol的断线重连,王者荣耀的断线重连 可以确保游戏的继续进行,坏的断网处理甚至不处理会出bug:比如我手上的项目就出了个bug 业务人员表示非常苦恼

JS 识别安卓还是ios苹果、识别是否微信内置浏览器、手机类型

识别手机平台是IOS还是安卓;识别是否微信内置浏览器;识别移动终端手机品牌

解决v-lazy-image在qq浏览器x5内核下无效

在安卓qq浏览器中,v-lazy-image始终无法显示。经调试,发现qq浏览器中IntersectionObserver缺少一个isIntersecting字段,而v-lazy-image插件是根据isIntersecting来显示图片的

浏览器重绘(repaint)重排(reflow)与优化

很多人都知道要减少浏览器的重排和重绘,但对其中的具体原理以及如何具体操作并不是很了解,当突然提起这个话题的时候,还是会一脸懵逼。希望大家可以耐着性子阅读本文,仔细琢磨,彻底掌握这个知识点!

监听浏览器刷新及关闭

为保证‘高度安全性’,用户每次退出页面或浏览器都要清除登陆信息,每次进入系统都要重新登陆(每次登陆还要手机验证码等乱七八糟的验证信息,,,求用户的心里阴影面积),但是刷新页面不可以清除登陆信息。

浏览器引入gRPC的现况

gRPC 1.0于2016年8月发布,现已发展成为应用通信的首选技术解决方案之一。它已被全球的初创公司、企业公司和开源项目采用。它对多语言环境的支持、关注性能、类型安全性和开发者生产力已经改变了开发者设计架构的方式。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广