検索

ホームページ  >  に質問  >  本文

javascript - 小米浏览器中,图片导致fixed定位的元素无法显示

在小米手机自带的浏览器中(版本V8.6.5), 我的布局代码是这样的, header 是fixed定位,content容器里面包含有图片。但是当有图片的时候,fixed定位的header就无法正常显示。

注意:如果复现不了,请在文档底部执行一段js代码,可保证必现

已经试了以下方法:

  1. 图片用背景图的方式,也会导致fixed元素无法显示

  2. 调高header的z-index没有效果

  3. 把图片挪到.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>
PHP中文网PHP中文网2870日前931

全員に返信(2)返信します

  • 迷茫

    迷茫2017-04-17 15:21:39

    更新:

    Xiaomi は公式に回答を出し、問題の場所を特定できます:

    こんにちは、これはMIUIブラウザのアクティブ広告フィルタリング機能です。これを行う本来の目的は、Web ページに挿入されたフローティング広告を検出してブロックすることです。具体的な判断は、固定要素とメイン ドキュメントで直接参照されているリソースのホストとの間に交差があるかどうかに基づいています。あなたが提供したページは、この機能をトリガーする必要があるようです (固定要素には c-ctrip.com のみが含まれています)。

    この機能は長い間オンラインで使用されており、リスクが低いと常に考えられてきました。また、構成可能なクラウド ホワイトリスト メカニズムが用意されています。では、この問題は開発中にのみ発生するのでしょうか?その場合は、ブラウザの設定で広告ブロックを無効にすることができます。オンライン バージョンでも問題が発生した場合は、緊急措置として、お客様の Web サイトを機能のホワイトリストに追加し、開発者の意見に耳を傾け、必要に応じてこの機能を変更または削除することも可能です。

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

    暫定的な解決策はこれです、毛昭、私はまだ良い解決策を考えていません。大まかなアイデアは次のとおりです:

    初期化中、ヘッダー要素を相対位置または絶対位置に保ちます。
    次に、dom-ready 後、setTimeout を通じてヘッダーに固定位置を追加し、要素が通常の表示を維持できるように、ページの再描画をトリガーします

    返事
    0
  • PHP中文网

    PHP中文网2017-04-17 15:21:39

    ご招待ありがとうございます。エディターに貼り付けるとすぐに、エラーが発生しました:

    返事
    0
  • キャンセル返事