Header Safari 中的问题和 iOS

Question

我有一个 header，里面有 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，它在移动设备上看起来不错。我上传了它并查看了我的 phone，看起来导航菜单显示在 header.

之外

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

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

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

这是 CSS 我为 header -

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

我试图删除 "position: sticky" 和 "top: 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;
}

有谁知道为什么 header 部分中没有显示？在 Chrome 和 mac OS 中的 Safari 中工作正常，但在 Safari 中无效，在 iOS

中的 Safari 或 Firefix 中无效

Answer 1

不要为您的页眉设置静态高度，这样内部内容可以扩展父级的大小。您可以改用最小高度。

Header Safari 中的问题和 iOS

Header issue in Safari and iOS

html

css

header

styling