Safari和iOS中的标题问题

Question

我的标头中有2个DIV和1个NAV-

  <header>
    <!-- Header Images -->
    <div class="left-logo">
      <img src="images/aloha-logo.svg" />
    </div>
    <div class="right-logo">
      <img src="images/cart-icon.svg" />
      <span class="red-dot"></span>
      <span id="number">0</span>
    </div>
    <hr>
    <nav class="main-menu">
      <ul>
      <li id="nav-about"><a href="#jumpAbout">About</a></li>
      <li id="nav-shop"><a href="#jumpShop">Shop</a></li>
      <li id="nav-featured"><a href="#jumpFeatured">Featured</a></li>
      <li id="nav-updates"><a href="#jumpUpdates">Updates</a></li>
      </ul>
    </nav>
  </header>

我在制作此网站时使用了Firefox，在移动视图中看起来也不错。我上传了它，然后在手机上看了一下，看起来导航菜单显示在标题的外面。

这是网站-https://johnsaputo.net/aloha/

[从iPhone上的Safari屏幕截图-https://johnsaputo.net/aloha/phone-screenshot.jpeg。我检查了iPhone上的Firefox，它看起来一样。

在Mac OS上的Chrome中看起来还不错，但在Safari上，它与手机上的问题相同。

这是标题的CSS-

header {
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: sticky;
  top: 0%;
  padding-top: 5px;
  height: 115px;
}

我试图删除“位置：粘性”和“顶部：0％”，以查看是否将其丢掉，但仍然存在此问题。

这是导航CSS-

.main-menu {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-bottom: 20px;
}

.main-menu ul {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

hr {
  display: block;
  margin-bottom: 10px;
  border-width: 1px;
  color: #e6e6e6;
  opacity: 50%;
  width: 100%;
}

这是英雄部分的CSS-

.hero-banner {
  color: white;
  width: 100%;
  height: 400px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)),
    url(../images/banner-girl.png), url(../images/flower-bkgd.jpg);
  background-position: left, center 50px, center;
  background-repeat: repeat, no-repeat, repeat;
  background-size: cover, contain, cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 50px;
}

有人知道为什么标头部分未显示吗？在Mac OS的Chrome和Safari中可以正常运行，但不能在Safari上运行，也不能在iOS的Safari或Firefix上运行]

我的标头中有2个DIV和1个NAV-

Answer 1

不要为标题设置静态高度，否则内部内容可以扩大父级的大小。您可以改用min-height。