在小米手机自带的浏览器中(版本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>
update:
小米官方给了回复,问题可以定位了:
================================
暂时的解决方案是这样的,毛招,暂时还没想到好的解决办法,说下大概:
初始化的时候让header元素保持relative或者absolute定位
然后再dom-ready之后,通过setTimeout为header增加fixed定位,触发页面的一次重绘,这样可以让元素保持正常显示
谢邀。刚粘到编辑器里,就报了个错: