Chrome 媒体查询行为答案

【问题标题】：Chrome media query behaviorChrome 媒体查询行为
【发布时间】：2014-02-05 06:17:30
【问题描述】：

我正在使用以下 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 中的错误还是我的代码错误？有什么想法吗？

提前致谢

【问题讨论】：

请创建一个小提琴.... fiddle.net
jsfiddle.net/9CcBR/6

标签： css google-chrome media-queries css-transitions

【解决方案1】：

好的，我自己弄清楚发生了什么。为了在 Chrome 中进行这项工作，我必须使用相同的类 (.navigation-main .nav-menu) 来引用 CSS 文件的媒体查询内外的导航菜单。 p>

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

【讨论】：