已解决:请参见下面的答案。我仍然很想知道为什么会这样,以及为什么修复程序起作用。
更新:我的问题可能与此webkit错误有关:
Bug 53166: 'display' styles in media queries don’t get re-applied correctly after resizing?
当我启动桌面大小的媒体查询时,导航栏上发生了一些事情,当窗口宽度又回到该大小以下时,它并没有“发生变化”。该问题似乎仅在Chrome或Safari中发生。我相信它与display
属性有关,并且感觉像是个错误。
You can see the behavior here.
要重现移动菜单问题,请从Chrome / Safari或iPad Safari开始。
从1023px以上的浏览器开始(在iPad上为横向)
使浏览器小于1024px(或旋转iPad)
单击菜单-问题1出现
重现桌面菜单问题
从大于1023像素的浏览器开始
使浏览器小于1024px
使浏览器再次宽于1023px
问题2出现
笔记:
如果我从1024px以下开始,一切都会很好。
如果我从1024px以下开始,将窗口扩大到1024px以上,则一切正常。
如果我从1024px以上开始,一切都会很好。
仅当我从1023px以上开始并降低其大小时,这才会中断。
我认为问题与我使用的表格单元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%;
}
}
最佳答案
抱歉回答了我很多问题。没有人看到这个。我相信这会帮助某人。
我看到了有关Webkit错误的similar question信息。他们添加显示的解决方案:将表行添加到UL标签起作用。但是,在我的情况下,我需要将UL的宽度定为table-row来实现。
最终的解决方案是将display: table
移至父div(#nav)。当我执行此操作并将其从<ul>
标记中删除时,一切正常。我不知道为什么
original link已更新,现在可以工作。
最终的CSS(仅限媒体查询):
/*--------------------------------------------------
5. HOME - DESKTOP LAYOUT - Min-Width: 1024px
---------------------------------------------------*/
...
.js #nav {
position: relative;
display: table;
}
...
#nav ul {
height: 87px;
width: 66.6666666667%;
min-width: 1024px;
margin: 0 auto;
border: 0;
background-color: #fff;
}