百度浏览器关于底部fixed定位元素问题

本文介绍了一个在百度浏览器中遇到的特殊问题,即客服咨询悬浮框因广告屏蔽机制而消失的现象,并分享了使用::after伪元素解决此问题的代码实现,确保了悬浮框在百度浏览器上的正常显示。

最近在写一个移动端官网,客户要求加上客服咨询的小悬浮框,特别简单的使用fixed定位之后,发现在百度浏览器上,这个悬浮框会闪现之后就不见了,其他浏览器上则正常显示,找了挺长时间的原因,才发现是百度浏览器的广告屏蔽机制。
最后使用::after伪元素解决的,代码如下:

.kfBtn{
  position: fixed;
  right: 0;
  display: block;
  bottom: 114px;
  z-index: 3;
  width: 72px;
  height: 70px;
  background-size: cover;
  background-image: url('/zhphone/public/images/kfImg.png')
}

.kfBtn::after{
  content: '.';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 72px;
  height: 70px;
  background-size: cover;
  background-image: url('/zhphone/public/images/kfImg.png')
}
  <a href="http://p.qiao.baidu.com/cps/chat?siteId=3636862&userId=788295" target="_blank" class="kfBtn"></a>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值