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