javascript - 固定定位元素消失

Question

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

造成这种情况的原因是单击菜单按钮，这会打开侧边栏导航。当我单击此按钮时，侧边栏会按预期打开，但随后标题会消失。剩下的就是我使用的图像替换技术的残余 Phark Method ;文字“菜单”被留下了。 (我相当确定这对手头的问题并不重要，但我可能是错的。)

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 属性值。为了解决这个问题，我刚刚向 header 元素添加了一个 left:0; 属性，给我以下 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 属性导致固定元素在页面加载时甚至不出现。

希望这会修复/激发 future 用户修复的想法!我知道从现在开始我将为所有固定元素同时设置 x 和 y 轴位置属性 ;)