已解决:请参见下面的答案。我仍然很想知道为什么会这样,以及为什么修复程序起作用。

更新:我的问题可能与此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;
    }

09-16 12:55