最近在写一个移动端官网,客户要求加上客服咨询的小悬浮框,特别简单的使用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>
本文介绍了一个在百度浏览器中遇到的特殊问题,即客服咨询悬浮框因广告屏蔽机制而消失的现象,并分享了使用::after伪元素解决此问题的代码实现,确保了悬浮框在百度浏览器上的正常显示。
2070

被折叠的 条评论
为什么被折叠?



