已解决：请参阅下面的答案。我仍然很想知道为什么会发生这种情况以及修复工作的原因。
更新：我的问题是否与此 webkit 错误有关：
错误 53166：媒体查询中的“显示”样式在调整大小后无法正确重新应用？
当我的桌面大小的媒体查询启动时，当窗口宽度回落到该大小以下时，我的导航栏不会“发生”。该问题似乎只发生在 Chrome 或 Safari 中。我相信它与display财产有关，感觉就像一个错误。
要重现移动菜单问题，请从 Chrome / Safari 或 iPad Safari 开始。
- 从宽于 1023px 的浏览器开始（iPad 上的横向）
- 使浏览器小于 1024px（或旋转 iPad）
- 单击菜单 - 出现问题 #1
重现桌面菜单问题
- 从宽于 1023px 的浏览器开始
- 使浏览器小于 1024px
- 让浏览器再次宽于 1023px
- 问题 #2 出现
笔记：
- 如果我从 1024 像素以下开始，一切都很好。
- 如果我从 1024 像素以下开始将窗口放大到 1024 像素以上，一切都很好。
- 如果我从 1024px 以上开始，一切都很好。
- 仅当我从 1023 像素以上开始并将大小调整为更低时才会中断。
我认为这个问题与我正在使用的 table-cell CSS 属性有关，但我无法弄清楚。
这里有一些 JS，但即使禁用了 JS，也会出现问题。
现在我将包含 Header HTML / CSS，希望答案很简单。
HTML
<div class="header">
<img class="logo" src="/assets/logo.png" />
<button id="toggle" class="closed"></button>
</div>
<div class="spacer clearfix"></div>
<div id="nav">
<ul class="primary-nav">
<li><a href="#">Sundays</a></li>
<li><a href="#">Learn More</a></li>
<li><a href="#">Citygroups</a></li>
<li class="desktop-logo"><a href="#"><img src="/assets/logo.png" /></a></li>
<li><a href="#">Discipleship</a></li>
<li><a href="#">Sermons</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</div>
这是 CSS，包括媒体查询
.header {
position: absolute;
width: 100%;
height: 70px;
z-index: 9999;
background: #FFF;
}
img.logo {
float: left;
width: 40.3125%; /* 129px / 320px */
margin: 24px 0 23px 9.375%; /* 24 0 23 30 */
}
.spacer {
height: 70px;
}
/* Main Nav */
button#toggle {
float: right;
border: none;
width: 6.5625%;
min-height: 23px;
margin: 24px 9.375% 23px 34.375%;
padding: 0;
background: url(assets/nav-toggle.png) center no-repeat;
}
button#toggle.opened {
background: url(assets/nav-toggle-opened.png) center no-repeat;
}
#nav {
width: 100%;
height: -moz-calc(100% - 70px);
height: -webkit-calc(100% - 70px);
height: calc(100% - 70px);
z-index: 9999;
}
.js #nav {
clip: rect(0 0 0 0);
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}
#nav ul {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: table;
list-style: none;
background-color: #363636;
border-bottom: solid #1E1E1E 1px;
}
#nav li {
width: 100%;
display: table-row;
}
#nav li a {
display: table-cell;
vertical-align: middle;
border-top: solid #1E1E1E 1px;
padding: 0 0 0 9.375%;
}
#nav li.desktop-logo { /* Necessary for centered logo on wide displays */
display: none;
}
/*--------------------------------------------------
4. HOME - LARGE MOBILE
- Min-Width: 321px -
---------------------------------------------------*/
@media screen and (min-width: 321px) {
img.logo {
max-width: 159px;
margin: 20px 0 21px 7.03125%; /* 20 0 21 54 */
}
h1 {
font-size: 2.7969em;
}
h5 {
font-size: 1.3125em;
}
}
/*--------------------------------------------------
4. HOME - MOBILE LANDSCAPE
- Min-Width: 321px -
- Orientation: Landscape -
---------------------------------------------------*/
@media screen
and (min-width: 321px)
and (max-width: 768px)
and (orientation: landscape) {
.headline {
display: block;
width: auto;
height: auto;
overflow: none;
margin-top: 5%;
}
}
/*--------------------------------------------------
4. HOME - SMALL TABLET / LARGE PHONE
- Min-Width: 481px -
---------------------------------------------------*/
@media screen
and (min-width: 481px) {
img.logo {
max-width: 159px;
margin: 20px 0 21px 7.03125%; /* 20 0 21 54 */
}
h1 {
font-size: 3.3438em;
}
h5 {
font-size: 1.625em;
}
}
/*--------------------------------------------------
5. HOME - LARGE TABLET LAYOUT
- Min-Width: 601px -
---------------------------------------------------*/
@media screen
and (min-width: 601px) {
h1 {
font-size: 4.5625em;
}
h5 {
font-size: 2.25em;
}
}
/*--------------------------------------------------
5. HOME - DESKTOP LAYOUT - Min-Width: 1024px
---------------------------------------------------*/
@media screen
and (min-width: 1024px) {
.header {
position: fixed;
top: 0;
height: 87px;
background: none;
display: none;
}
img.logo, .spacer {
display: none;
}
.js #nav {
position: relative;
}
.js #nav.closed {
max-height: none;
}
#nav-toggle {
display: none;
}
button#toggle {
display: none;
}
#nav {
height: auto;
}
#nav ul {
height: 87px;
width: 66.6666666667%;
min-width: 1024px;
margin: 0 auto;
border: 0;
background-color: #fff;
}
#nav li {
width: auto;
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: .875em;
}
#nav li a {
display: inline-block;
vertical-align: none;
text-align: center;
line-height: 87px;
border: 0;
padding: 0;
margin: 0;
}
#nav li a, #nav li a:active, #nav li a:visited {
color: #58585A;
}
#nav li a:hover {
color: #FAAC1D;
}
#nav li.desktop-logo {
display: table-cell;
width: 206px;
padding: 0 20px;
}
#nav li.desktop-logo img {
padding: 0;
}
#nav li.desktop-logo a {
display: inline;
line-height: 0;
}
.flexslider {
height: -moz-calc(100% - 87px);
height: -webkit-calc(100% - 87px);
height: calc(100% - 87px);
}
.headline hr {
width: 50%;
}
}