Chrome媒體查詢行爲

Question

我使用以下HTML和CSS代碼在移動設備上顯示切換按鈕。點擊此按鈕打開（或關閉）導航菜單，到高度轉變：

HTML

<nav id="site-navigation" class="navigation-main"> 
    <h1 class="menu-toggle">Menú</h1> 
    <div class="menu-container"> 
     <ul class="nav-menu"> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
     </ul> 
    </div> 
</nav> 

CSS

.menu-toggle { 
    display: none; 
} 
.navigation-main { 
    clear: both; 
    display: block; 
    font-size: 14px; 
    text-transform: uppercase; 
} 
.navigation-main ul { 
    list-style: none; 
    margin: 0; 
    padding-left: 0; 
} 

@media only screen and (min-width: 50px) and (max-width: 767px) { 
    .menu-toggle { 
     display: block; 
    } 

    .navigation-main.toggled .nav-menu { 
     max-height: 500px; 
    } 

    .navigation-main .nav-menu { 
     max-height: 0; 
     overflow: hidden; 
     -webkit-transition: max-height 0.5s; 
     -moz-transition: max-height 0.5s; 
     transition: max-height 0.5s; 
    } 

} 

我檢查了在IE和Firefox瀏覽器的代碼和它的工作原理如預期。在Chrome中，也有一個問題：重新加載頁面時，導航菜單臨時顯示時間不到1秒。

這是Chrome中的錯誤還是我的代碼錯了？有任何想法嗎？

在此先感謝

Answer 1

好吧，我想通了自己在做什麼。要在Chrome中實現此功能，我必須使用同一個類（.navigation-main .nav-menu）來引用CSS文件上媒體查詢內外的導航菜單。

.menu-toggle { 
    display: none; 
} 
.navigation-main { 
    clear: both; 
    display: block; 
    font-size: 14px; 
    text-transform: uppercase; 
} 
.navigation-main .nav-menu { 
    list-style: none; 
    margin: 0; 
    padding-left: 0; 
} 

@media only screen and (min-width: 50px) and (max-width: 767px) { 
    .menu-toggle { 
     display: block; 
    } 
    .navigation-main.toggled .nav-menu { 
     max-height: 500px; 
    } 
    .navigation-main .nav-menu { 
     max-height: 0; 
     overflow: hidden; 
     -webkit-transition: max-height 0.5s; 
     -moz-transition: max-height 0.5s; 
     transition: max-height 0.5s; 
    } 
}