固定定位元素消失

Question

我刚遇到一个问题,一个元素(标题),固定在页面顶部,消失了.这是在我创建的移动网站中找到的.

造成这种情况的原因是点击菜单按钮,这将打开侧边栏导航.当我单击此按钮时,侧边栏将按预期打开,但随后标题将消失.剩下的就是我使用Phark方法的图像替换技术的残余; 文本"菜单"被遗忘了.(我很确定这对手头的问题并不重要,但我可能是错的.)

该header元素具有如下样式:

header{
    position: fixed;
    top: 0;
    z-index: 10000;
    width: 100%;
    background: url('../images/header-bg.png') #111 repeat-x top left;
    border-bottom: 1px solid #090909;
    text-align: center;
}

这只会发生在Android 4.0股票浏览器中(Galaxy Tabs/Galaxy Nexus是我测试过的).

什么会导致这种情况发生在Android 4.0浏览器中？

Answer 1

似乎问题在于该header元素没有left属性值.为了解决这个问题,我只是left:0;在header元素中添加了一个属性,给出了以下CSS:

header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    background: url('../images/header-bg.png') #111 repeat-x top left;
    border-bottom: 1px solid #090909;
    text-align: center;
}

在弄清楚之后,我记得在使用固定定位的桌面网站上有类似的问题.我没有left设置属性的事实导致在加载页面时甚至不会出现fixed元素.

希望这可以修复/激发未来用户修复的想法!我知道从现在开始我将把所有固定元素设置为ax和y轴位置属性;)