小米手机 页面顶部被遮盖? 不!是屏蔽隐藏拉!

今天新项目进入了测试阶段,没多久测试就发来信息说:小米6手机自带浏览器打开页面看不到页面顶部的 logo 与按钮,但是其他手机没有问题并且发来了截图。
小米手机 页面顶部被遮盖? 不!是屏蔽隐藏拉!_第1张图片
应该是下图这样 涂鸦区域是logo小米手机 页面顶部被遮盖? 不!是屏蔽隐藏拉!_第2张图片

我一看,确实啥都看不到。第一反应是被浏览器tab标签(展示页面标题的地方)遮盖了,然后就在测试服开始了调试。

方法:给最外层盒子加padding
结果:padding 有了 好大一块空白但是 还是看不到顶部的logo
方法:绝对定位 让其挪到页面中间 (先看到在说)
结果:我的oppo r11 s显示挪到了中间 小米手机,啥都没有
方法:在上面方法的基础上的增加z-index值
结果:还是不行

突然灵光一闪(瞎猜的)不会使没有渲染这一块,没有DOM吧,然后就alert 下高度与按钮文字,发现都有。这时真是想不通啊,见了鬼了。

突然灵光又一闪,看下是否隐藏,结果为true

alert($(".top_box").is(':hidden'))

天哪我没有把他隐藏啊,搜了下代码 都没有 display:none 与 hide()。那是怎么回事呢

这时试着改了下类名 把 top_box 改为 top_box1 奇迹出现了。

自此找到原因了 改类名 改css 搞定。

最后我去找找原因 找到了在不上。

你可能感兴趣的:(前端,css,html)