問(wèn)題描述

在小米手機(jī)自帶的瀏覽器中（版本V8.6.5）, 我的布局代碼是這樣的, header 是fixed定位，content容器里面包含有圖片。但是當(dāng)有圖片的時(shí)候，fixed定位的header就無(wú)法正常顯示。

注意：如果復(fù)現(xiàn)不了，請(qǐng)?jiān)谖臋n底部執(zhí)行一段js代碼，可保證必現(xiàn)

已經(jīng)試了以下方法：

圖片用背景圖的方式，也會(huì)導(dǎo)致fixed元素?zé)o法顯示

調(diào)高h(yuǎn)eader的z-index沒(méi)有效果

把圖片挪到.page 容器之外，則能正常顯示，但是這樣會(huì)影響我的布局，不可用

有人遇到類(lèi)似的問(wèn)題嗎？什么原因？怎么解決的

.page {position: relative; height: 100%; width: 100%; padding-top: 44px;}.header-fixed {position:fixed; background: #ccc; width: 100%; height: 44px; top: 0;}.content img{width: 100px;}<p class='page'> <header class='header-fixed'>header</header> <section class='content'><img src='https://dimg04.c-ctrip.com/images/30080f0000007b78e6D63_C_500_280.jpg'> </section></p>

問(wèn)題解答

小米官方給了回復(fù),問(wèn)題可以定位了：

您好，這是 MIUI 瀏覽器的主動(dòng)過(guò)濾廣告功能。我們做這個(gè)的初衷是檢測(cè)并屏蔽網(wǎng)頁(yè)中插入的浮動(dòng)廣告，具體判斷依據(jù)是看 fixed 元素與主文檔中直接引用的資源的 host 是否有交集。您提供的這個(gè)頁(yè)面看起來(lái)應(yīng)該會(huì)觸發(fā)這個(gè)功能（fixed 元素里僅包含 c-ctrip.com）。

這個(gè)功能已經(jīng)上線較長(zhǎng)時(shí)間，一直認(rèn)為風(fēng)險(xiǎn)較小，并且我們有可配置的云端白名單機(jī)制。所以，您是否僅在開(kāi)發(fā)中遇到了此問(wèn)題？如果是，可以在瀏覽器設(shè)置中關(guān)閉廣告過(guò)濾功能。如果您的線上版本也遇到了問(wèn)題，作為一個(gè)緊急措施，我們可以將您的網(wǎng)站加入功能白名單里，并且愿意聽(tīng)取開(kāi)發(fā)者的意見(jiàn)，視情況修改甚至去掉這個(gè)功能。

================================

暫時(shí)的解決方案是這樣的，毛招，暫時(shí)還沒(méi)想到好的解決辦法，說(shuō)下大概：

初始化的時(shí)候讓header元素保持relative或者absolute定位然后再dom-ready之后，通過(guò)setTimeout為header增加fixed定位，觸發(fā)頁(yè)面的一次重繪，這樣可以讓元素保持正常顯示

謝邀。剛粘到編輯器里，就報(bào)了個(gè)錯(cuò)：