0
已解答：请参阅下面的答案。我仍然很想知道为什么会发生这种情况，以及修复工作的原因。只有当我跌破我的折点并再次扩张时，布局才会中断
UPDATE：难道我的问题与此有关的WebKit错误：
Bug 53166: 'display' styles in media queries don’t get re-applied correctly after resizing？
当我的桌面大小的媒体查询开始时，我的导航栏发生了一些情况，当窗口宽度下降到低于该大小时，不会“解除”。该问题似乎只在Chrome或Safari中发生。我相信它与display属性有关，它感觉就像一个bug。
You can see the behavior here.
要重现移动菜单问题，使用Chrome/Safari浏览器或iPad的Safari启动。
- 开始用浏览器比1023px宽（在iPad上横向）
- 制作浏览器小于1,024像素（或者将iPad旋转）
- 点击菜单 - 问题＃1出现
重现桌面菜单问题
- 开始与浏览器宽度大于1023px
- 制作浏览器小于1,024像素
- 制作的浏览器宽度大于1023px再次
- 问题＃2出现
注：
- 如果我从1024px开始，一切都很好。
- 如果我在1024px下开始放大超过1024px的窗口，一切都很好。
- 如果我从1024px开始，一切都很好。
- 只有当我在1023px以上开始并调低调整大小时，此功能才会中断。
我认为这个问题与我使用的表格单元CSS属性有关，但我无法弄清楚。
这里有一些JS在这里，但即使在禁用JS时也会出现问题。
现在我将包含标题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%;
}
}