Safari Web 和移动浏览器上的导航栏环绕

Question

我需要一些关于以下问题的指导。

我使用 CSS 网格框架构建了一个投资组合站点，同时我使用 Flexbox 在其中构建了一个导航栏。我正在测试它的响应能力，它在所有浏览器除了 Safari（在网络和移动网络上）看起来都不错。导航栏一直在换行，而在其他浏览器上没问题。

我测试过更改字体大小，margins / padding、flex-basis % 和 flex-wrap: nowrap。我测试过删除 nav li，无论有多少 li，它仍然会换行。

我在其他 nav 栏中使用了此代码组合，在 Safari 上没有出现任何问题。对这次发生的事情有点迷茫。

有人有过类似的想法或遇到过类似的问题吗？ Here's a link to the full repository on GitHub。下面的代码也是如此。提前致谢！

/* Universal Styles */

html {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 16px;
  color: #F4F4F4;
  height: 100%;
  width: 100%;
  background-color: black;
}

* {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}


/* Grid Container */

.container {
  display: grid;
  grid-template-rows: 60px 800px 500px 500px 60px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "header header header" "masthead masthead masthead" "story work work" "collab collab enquire" "footer footer footer";
}


/* Fixed Nav Bar */

header {
  grid-area: header;
  position: fixed;
  top: 0;
  z-index: 1;
  display: flex;
  /* Flex container to easily position logo & nav bar links */
  background-color: black;
  width: 100%;
  padding: 10px;
}

.logo {
  flex-basis: 20%;
  display: flex;
  /* Flex container to easily center & position logo */
  font-family: 'Amatic SC', cursive;
  /* Font for 'MOO Creative' styling */
  font-size: 2.4rem;
  align-self: center;
  margin-left: 20px;
}

nav {
  flex-basis: 80%;
  display: flex;
  /* Flex container to easily center & position nav links */
  justify-content: flex-end;
  align-self: center;
  flex-direction: row;
}

li {
  display: inline-flex;
  font-family: 'Fjalla One', sans-serif;
  font-size: 1.2rem;
  padding-right: 40px;
  text-decoration: none;
}

nav a:link,
nav a:visited {
  color: #F4F4F4;
  text-decoration: none;
}

nav a:active,
nav a:hover {
  color: #D35F91;
}


/* Masthead */

.masthead {
  grid-area: masthead;
  background-image: url("images/header-image-desktop-black.png");
  background-size: cover;
  display: grid;
  /* Subgrid to align text over background image */
  flex-direction: column;
  align-content: center;
  height: 100%;
}

.masthead h1 {
  font-size: 8rem;
  font-family: 'Fjalla One', sans-serif;
  border-bottom: solid 6px #F4F4F4;
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 10px;
  margin-left: 100px;
}

.masthead h2 {
  font-size: 1.7rem;
  letter-spacing: .12rem;
  font-weight: 300;
  text-transform: uppercase;
  margin-left: 100px;
}


/* Section Styling */

.story,
.work,
.collab,
.enquire {
  padding-left: 100px;
  padding-top: 100px;
}

.section-title {
  font-family: 'Fjalla One', sans-serif;
  font-size: 4rem;
}

.description {
  font-size: 1.6rem;
  line-height: 1.1;
}


/* My Story */

.story {
  grid-area: story;
  background-color: #0A87F5;
  border-right: solid 6px black;
  border-bottom: solid 6px black;
}

.story:hover,
.story:active {
  /* Add backgroung img on hover, click */
  background-image: url("images/nyc-blue.png");
  background-repeat: no-repeat;
  background-position: cover;
  background-size: cover;
}


/* My Work */

.work {
  grid-area: work;
  background-color: #BA456C;
  border-bottom: solid 6px black;
}

.work:hover,
.work:active {
  /* Add backgroung img on hover, click */
  background-image: url("images/my-work-pink.png");
  background-repeat: no-repeat;
  background-position: cover;
  background-size: cover;
}


/* Let's Collaborate */

.collab {
  grid-area: collab;
  background-color: #46aa8b;
  border-right: solid 6px black;
}

.collab:hover,
.collab:active {
  /* Add backgroung img on hover, click */
  background-image: url("images/pen-and-paper-green.png");
  background-repeat: no-repeat;
  background-position: cover;
  background-size: cover;
}


/* Get In Touch */

.enquire {
  grid-area: enquire;
  background-color: #d8c216;
}

.enquire:hover,
.enquire:active {
  /* Add backgroung img on hover, click */
  background-image: url("images/dial-phone-yellow.png");
  background-repeat: no-repeat;
  background-position: cover;
  background-size: cover;
}


/* Footer */

footer {
  grid-area: footer;
  text-align: center;
  align-self: center;
  width: 100%;
  font-size: 1.2rem;
  overflow-y: hidden;
}

footer strong {
  font-family: 'Amatic SC', cursive;
  /* Font for 'MOO Creative' styling */
  font-size: 1.5rem;
}


/* OPTIMIZE FOR MOBILE */

@media only screen and (max-width: 700px) {
  /* Adjust grid to be mobile friendly, 1 column only */
  .container {
    display: grid;
    grid-template-rows: 40px 800px 300px 300px 300px 300px 40px;
    /* Nav Bar and Footer decreased to 40px */
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: "header" "masthead" "story" "work" "collab" "enquire" "footer";
  }
  /* Adjust borders (top-only), Sections - make text smaller */
  .story {
    border-top: solid 6px black;
  }
  .story,
  .work,
  .collab,
  .enquire {
    border-bottom: solid 6px black;
    border-left: none;
    border-right: none;
    padding-left: 20px;
    padding-top: 100px;
  }
  .enquire {
    border-bottom: none;
    /* exclude enquire section from bottom border, overlaps with footer */
  }
  .section-title {
    font-size: 3rem;
  }
  .description {
    font-size: 1.1rem;
  }
  /* Remove Logo, make Nav Links 100% */
  nav {
    flex-basis: 100%;
    justify-content: space-evenly;
    align-content: center;
    flex-wrap: wrap;
  }
  nav li {
    font-size: 1.2rem;
    padding-right: 20px;
  }
  .logo {
    display: none;
  }
  /*Masthead - make text smaller */
  .masthead h1 {
    font-size: 4.5rem;
    margin-left: 20px;
    line-height: 1.1;
    padding-bottom: 20px;
  }
  .masthead h2 {
    font-size: 1rem;
    margin-left: 20px;
    padding-top: 10px;
  }
}


/* OPTIMIZE FOR TABLET */

@media only screen and (min-width: 700px) and (max-width: 1200px) {
  /* Make logo smaller */
  .logo {
    font-size: 1.9rem;
  }
  /* Adjust grid heights to be tablet friendly */
  .container {
    display: grid;
    grid-template-rows: 40px 400px 250px 250px 60px;
  }
  /* Masthead - make text smaller */
  .masthead h1 {
    font-size: 4.8rem;
    margin-left: 40px;
  }
  .masthead h2 {
    font-size: 1.1rem;
    margin-left: 40px;
  }
  /*Adjust sections to be tablet friendly with smaller text */
  .section-title {
    font-size: 2.5rem;
    padding-bottom: 8px;
  }
  .description {
    font-size: 1.2rem;
    line-height: 1;
    width: 90%;
    overflow-y: hidden;
  }
  .story,
  .work,
  .collab,
  .enquire {
    padding-left: 40px;
    padding-top: 70px;
  }
}


/* OPTIMIZE FOR LAPTOPS & SMALL COMPUTER SCREENS */

@media only screen and (min-width: 1200px) and (max-width: 1700px) {
  /*Masthead Text - make padding smaller */
  .masthead h1,
  .masthead h2 {
    margin-left: 50px;
  }
  /*Section Descriptions - make font smaller */
  .description {
    font-size: 1.7rem;
    margin-top: 5px;
  }
  /*Section Styling - make padding smaller */
  .story,
  .work,
  .collab,
  .enquire {
    padding-left: 50px;
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" , user-scalable="no">
  <title>Meghan O. Offredo | Portfolio</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Fjalla+One&family=Zen+Maru+Gothic:wght@300&display=swap" rel="stylesheet">
</head>

<body>
  <!-- Grid Container -->
  <div class="container">

    <!-- Fixed Nav Bar -->
    <header>
      <div class=logo>MOO Creative</div>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="html/story.html">About Me</a></li>
          <li><a href="html/work.html">My Work</a></li>
          <li><a href="html/collab.html">Services</a></li>
          <li><a href="html/enquire.html">Contact</a></li>
        </ul>
      </nav>
    </header>

    <!-- Masthead Image & Text -->
    <div class="masthead">
      <h1>Meghan O. Offredo</h1>
      <h2>Front-End Development | Web Accessibility | Responsive Design</h2>
    </div>

    <!-- My Story -->
    <div class="story" onclick="location.href='html/story.html'">
      <!-- Link to page -->
      <h3 class="section-title">My Story</h3>
      <h4 class="description">From advertising to web development.</h4>
    </div>

    <!-- My Work -->
    <div class="work" onclick="location.href='html/work.html'">
      <!-- Link to page -->
      <h3 class="section-title">My Portfolio</h3>
      <h4 class="description">Explore my recent work.</h4>
    </div>

    <!-- Let's Collaborate -->
    <div class="collab" onclick="location.href='html/collab.html'">
      <!-- Link to page -->
      <h3 class="section-title">Let's Collaborate</h3>
      <h4 class="description">What I do and how I can support you.</h4>
    </div>

    <!-- Get In Touch -->
    <div class="enquire" onclick="location.href='html/enquire.html'">
      <!-- Link to page -->
      <h3 class="section-title">Get In Touch</h3>
      <h4 class="description">I'd love to hear from you.</h4>
    </div>

    <!-- Footer -->
    <footer>
      <p>© <strong>MOO Creative</strong> | All Rights Reserved</p>
    </footer>

  </div>

</body>

</html>

Answer 1

您需要将 flex-shrink 添加到您的 ul 元素。

ul {
  display: flex;
  flex-shrink: 0;
}

Safari Web 和移动浏览器上的导航栏环绕

Navigation Bar Wrapping on Safari Web & Mobile Browser

html

css

safari