javascript - 带有奇怪的 webkit 错误的响应式 header

Question

我目前正在构建一个新网站，但 webkit 浏览器出现了一个小故障。

http://typework.github.io/green-life/

如果您浏览到上面的 url 并将浏览器大小调整为移动大小。 打开导航(在汉堡包上只单击一次)并调整回全屏。你可以看到我的导航向左移动了。当您不断调整浏览器大小时，您会发现它越来越向左移动。

在 Firefox 中我没有这个问题，Safari 和 Chrome 有。

我使用了简单明了的 JavaScript:

$('.menu-link').on('click', function() {
    $('.nav').toggleClass('active');
    return false;
});

和简单的显示: block css:

.nav {
    display: inline-block;
    float: right;
    padding: 31px 0 0 0;
    margin: 0;
}
@media(max-width: 992px) {
    .nav {
        position: relative;
        margin: 0;
        padding: 0;
        display: none;
        clear: both;
        width: 100 %;
    }
    .nav.active {
        display: block;
    }

不过我似乎没有发现这个错误。有什么想法吗？

Answer 1

我认为 nav li 有问题，更改 display:inline-block.

.nav li {
    display: inline-block;
    padding-left: 30px;
    text-align: right;
}

我认为这会解决您的问题。

也让它成为媒体查询中的显示 block