Safari 和 iOS 中的标题问题答案

【问题标题】：Header issue in Safari and iOSSafari 和 iOS 中的标题问题
【发布时间】：2020-06-13 06:09:15
【问题描述】：

我有一个标题，里面有 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 上则无法运行

【问题讨论】：

标签： html css header styling

【解决方案1】：

不要给你的头部设置静态高度，那么内部内容可以扩大父级的大小。您可以改用 min-height。

【讨论】：