Header 拒绝在移动视图中显示

Question

我花了一个星期的时间试图解决这个问题。我正在构建一个 django 网站，当我在移动设备视图上查看该网站时，我有一个导航菜单始终隐藏在某些元素后面。在 Chrome Dev Tools 上，它看起来非常好，但在我的 phone 上，它完全消失了。

Chrome 开发工具与 Phone 的示例：

我解决这个问题的第一步是查看 z-index。 None 我试过的索引有效，而且我确保搜索 z-index 也不能在 Internet 上工作的解决方案，例如具有必要的先决条件。由于我的导航菜单在我的 base.html 模板文件中，我什至将 header 移到了 body 元素的最底部（它有一个固定的位置），这样 {%block content%} 始终高于 header。那也没用。

所以我尝试在导航栏打开时将所有元素移动到左侧。事情是这样的。

如果我尝试在 chrome 开发工具上通过右键单击应该为空 space 的空白 space 进行检查，我得到以下内容：

...意味着唯一存在的是 HTML 文件本身。我完全不知所措。我的 HTML 元素也没有背景。

我感觉这是一个与 Django 相关的问题，可能与我的导航位于我的 base.html 模板中这一事实有关，该模板在我几乎所有其他页面中都有扩展。我已经为我建立的其他网站使用了完全相同的导航格式，它们都运行良好，所以我怀疑问题出在导航 css 上。我还有其他一些针对特定页面的导航菜单，它们都可以正常工作，我假设这是因为它们的导航菜单位于 not base.html 的模板中，即它没有扩展。我很绝望——有没有人知道为什么会这样？非常感谢。

编辑： 打开“查看源代码”选项卡，一切似乎都正常。我浏览了整个文档，但这里只是导航部分的概述 html 以防相关：

<header>
   <a href="/home/"><img></a>
   <nav class="nav">
       <ul class="styled-list">
           <li><a href="/home/"><img>Home</a></li>
           <li><a href="/browse/"><img>Browse</a></li>
           <li><a href="/messages"><img>Inbox </a></li>
           <li><a href="/activity"><img>Activity</a></li>
           <li class="dropdown">
              <button class="dropbtn">
                  <a href="/users/profile/4/"><img>e</a>
                  <i class="fa fa-caret-down"></i>
              </button>
              <div class="dropdown-content">
                  <a href="/users/profile/4/">Profile</a>
                  <a href="/users/logout/">Log Out</a>
              </div>
           </li>
        </ul>
      </nav>
      <div class="nav-toggle">
          <div class="hamburger"></div>
      </div>
</header>

编辑 2：我尝试将 HTML 从 base.html 中取出并直接放在其中一个页面中，因此它没有被扩展，即使 base.html 没有扩展，问题仍然存在。所以这可能不是 Django 的问题，但我仍然对可能阻碍视图的东西感到困惑。

编辑 3：如果有帮助，我实际上可以在移动设备上访问导航元素，就像我可以单击链接并转到那些页面一样。它只是拒绝出现，仅此而已。这意味着我认为导航已经高于一切，但无论出于何种原因，它的背景和文本看起来都是透明的，这没有任何意义。

编辑 4：刚刚意识到移动视图在三星上运行良好，但在苹果上出现故障。现在我只是绝望地迷路了。

编辑 5：在 jsfiddle 上制作了一个最小的可重现示例，https://jsfiddle.net/aqxr9duy/2/。它在笔记本电脑上运行良好，但如果您在 iPhone 上查看它（jsfiddle 并未针对移动视图进行完全优化，但它仍然可以在一定程度上查看），导航不会像在笔记本电脑上那样正确显示查看。

Answer 1

问题是 header 的 css 您设置了 position: fixed; height: 4em; overflow: hidden;。您的 nav 也有位置 fixed（如果屏幕宽度 < 950px）：

<header>
   <nav>
     Content that's higher than 4em
   </nav>
</header>

header {
  position: fixed;
  top: 0;
  left: 0;
  height: 4em;
  overflow: hidden;
}

nav {
  position: fixed;
  z-index: 1000;
}

所以 Safari 将 nav 保留在 header 中，因为它们都有固定的位置。这意味着它尊重 overflow: hidden 指令。

将您的 header css 更改为 position: absolute。这样 nav 在固定位置时移动到 header 之外。

header {
  position: absolute;
  ...
}

虽然这确实消除了导航栏的粘性，但它会影响您网站的行为。让导航栏在小屏幕上滚动并不是一件坏事，所以你可以只在小屏幕上改变它。

或者，只需删除 overflow: hidden。我看不出它有什么用：

header {
    position: fixed;
    ...
    # overflow: hidden; (remove this)
}

显然，fixed in fixed 被 chromium 和 webkit 解释不同。看起来 Chromium 正在做正确的事情并将两个盒子解耦，尽管官方规范似乎在这里留下了一些解释空间。

Header 拒绝在移动视图中显示

Header refuses to show up on mobile view

html

css

django

google-chrome-devtools