찾다

 >  Q&A  >  본문

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일 전930

모든 응답(2)나는 대답할 것이다

  • 迷茫

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

    업데이트:

    Xiaomi가 공식적으로 답변을 드렸으며 문제 위치를 확인할 수 있습니다.

    안녕하세요 MIUI 브라우저의 활성 광고 필터링 기능입니다. 이를 수행하는 원래 의도는 웹 페이지에 삽입된 플로팅 광고를 감지하고 차단하는 것입니다. 구체적인 판단은 고정 요소와 기본 문서에서 직접 참조되는 리소스 호스트 사이에 교차점이 있는지 여부에 따라 결정됩니다. 제공하신 페이지는 이 기능을 실행해야 하는 것 같습니다(고정 요소에는 c-ctrip.com만 포함되어 있음).

    이 기능은 오랫동안 온라인에 있었으며 항상 덜 위험한 것으로 간주되어 왔으며 구성 가능한 클라우드 화이트리스트 메커니즘이 있습니다. 그렇다면 개발 중에만 이 문제가 발생합니까? 그렇다면 브라우저 설정에서 광고 차단을 해제할 수 있습니다. 온라인 버전에서도 문제가 발생하는 경우 긴급 조치로 귀하의 웹사이트를 기능 허용 목록에 추가할 수 있으며 개발자의 의견을 듣고 적절하게 이 기능을 수정하거나 제거할 수도 있습니다.

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

    임시 해결책은 이것입니다, Mao Zhao. 저는 아직 좋은 해결책을 생각하지 못했습니다. 대략적인 아이디어는 다음과 같습니다.

    초기화 중에 헤더 요소를 상대 또는 절대 위치로 유지
    그런 다음 DOM 준비가 완료된 후 setTimeout을 통해 헤더에 고정 위치 지정을 추가하고 페이지 다시 그리기를 트리거하여 요소가 정상적인 표시를 유지할 수 있도록 합니다.

    회신하다
    0
  • PHP中文网

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

    초대해주셔서 감사합니다. 편집기에 붙여넣자마자 오류가 발생했습니다.

    회신하다
    0
  • 취소회신하다