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%;
}
}