巧用偽元素解決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) 去進行縮放
嗯，結果又被百度遮蔽了……失敗。
後續
靈機一動，想到了使用偽元素來解決，於是有了上述的【偽元素大法】~ 獨家原創，親測好用，希望可以幫到大家~