Safari桌面及移动端浏览器Flex导航栏异常换行问题求助

核心问题原因 #

Safari对Flex布局的宽度计算、overflow属性的处理逻辑和Chromium系浏览器存在差异，你的代码中几个写法刚好触发了Safari的兼容问题：

1. 全局通配符设置overflow-x: hidden导致嵌套Flex元素的宽度计算异常
2. 未显式设置box-sizing: border-box，header的padding+100%宽度实际超出视口，挤压导航可用宽度
3. Flex子元素未显式声明收缩/放大规则，Safari默认自动收缩导航宽度
4. 导航内的<ul>未设置Flex相关属性，作为块级元素触发异常换行

具体修复步骤 #

• 调整全局通用样式，删除通配符的overflow-x: hidden，新增盒模型声明：

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
/* 仅给外层容器设置overflow-x: hidden */
body, .container {
  overflow-x: hidden;
}

• 修正header的定位和Flex属性，删除无效的grid-area声明：

header {
  position: fixed;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  background-color: black;
  width: 100%;
  padding: 10px;
}

• 给logo和nav添加显式Flex规则，禁止自动收缩：

.logo {
  flex: 0 0 20%;
  display: flex;
  font-family: 'Amatic SC', cursive;
  font-size: 2.4rem;
  align-self: center;
  margin-left: 20px;
}
nav {
  flex: 0 0 80%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

• 给nav内的ul添加Flex布局规则：

nav ul {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
}

• 给li添加禁止折行和禁止收缩规则：

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

• 修正viewport标签的语法错误，避免移动端布局异常：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

内容的提问来源于stack exchange，提问作者Meghan