html - 标题拒绝显示在移动 View 上

Question

我花了一个星期试图弄清楚这一点。我正在构建一个 django 网站，我有一个导航菜单，当我在移动 View 上查看该网站时，该菜单始终隐藏在某些元素后面。在 Chrome Dev Tools 上，它看起来非常好，但在我的手机上，它完全消失了。

Chrome 开发工具与电话的示例:



我解决这个问题的第一步是查看 z-index。我尝试过的索引都不起作用，并且我确保搜索在 Internet 上也不起作用的 z-index 的解决方案，例如具有必要的先决条件。由于我的导航菜单在我的 base.html 模板文件中，我什至将标题向下移动到 body 元素的最底部(它具有固定位置)，因此 {%block content%} 始终位于标题上方。那也没有用。

因此，每当导航栏打开时，我都尝试将所有元素向左移动。这就是发生的事情。



如果我尝试在 chrome 开发工具上通过右键单击应该有空白的空白区域来检查它，我会得到以下信息:



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

我有一种感觉，这是一个与 Django 相关的问题，可能与我的导航位于我的 base.html 模板中的事实有关，该模板几乎在我的所有其他页面中都有扩展。我已经对我构建的其他网站使用了这种完全相同的导航格式，并且它们都运行良好，所以我怀疑问题出在导航 css 上。我还有一些其他特定页面的导航菜单，它们都可以正常工作，我假设这是因为它们的导航菜单位于不是 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 : 我尝试从base.html 中取出HTML 并将其直接放在其中一个页面中，这样它就不会被扩展，即使没有扩展base.html，问题仍然存在。所以这可能不是 Django 的问题，但我仍然对可能阻碍 View 的东西感到困惑。

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

编辑 4 :刚刚意识到移动 View 在三星上运行良好，但在 Apple 上出现故障。现在我只是绝望地迷失了。

编辑 5 :在 jsfiddle 上制作了一个最小的可重现示例， https://jsfiddle.net/aqxr9duy/2/ .它在笔记本电脑上运行良好，但是如果您在 iPhone 上查看它(jsfiddle 没有完全针对移动 View 进行优化，但它仍然有些可见)，导航不会像在笔记本电脑 View 上那样正确显示。

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)
}

显然， 固定内固定 Chrome 和 webkit 的解释不同。似乎 Chrome 正在做正确的事情并将两个盒子解耦，尽管官方规范似乎在这里留下了一些解释空间。