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

Question

我目前正在建立一个新网站，但 webkit 浏览器有一个小问题。

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

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

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

我使用了简单的 JavaScript：

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

和简单的显示：块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;
}

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

也可以display block在媒体查询中使用