問題描述

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

注意：如果復現不了，請在文檔底部執行一段js代碼，可保證必現

已經試了以下方法：

圖片用背景圖的方式，也會導致fixed元素無法顯示

調高header的z-index沒有效果

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

有人遇到類似的問題嗎？什么原因？怎么解決的

.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>

問題解答

小米官方給了回復,問題可以定位了：

您好，這是 MIUI 瀏覽器的主動過濾廣告功能。我們做這個的初衷是檢測并屏蔽網頁中插入的浮動廣告，具體判斷依據是看 fixed 元素與主文檔中直接引用的資源的 host 是否有交集。您提供的這個頁面看起來應該會觸發這個功能（fixed 元素里僅包含 c-ctrip.com）。

這個功能已經上線較長時間，一直認為風險較小，并且我們有可配置的云端白名單機制。所以，您是否僅在開發中遇到了此問題？如果是，可以在瀏覽器設置中關閉廣告過濾功能。如果您的線上版本也遇到了問題，作為一個緊急措施，我們可以將您的網站加入功能白名單里，并且愿意聽取開發者的意見，視情況修改甚至去掉這個功能。

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

暫時的解決方案是這樣的，毛招，暫時還沒想到好的解決辦法，說下大概：

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

謝邀。剛粘到編輯器里，就報了個錯：