巧用僞元素解決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) 去進行縮放

嗯，結果又被百度屏蔽了……失敗。

後續

靈機一動，想到了使用僞元素來解決，因而有了上述的【僞元素大法】~ 獨家原創，親測好用，但願能夠幫到你們~