Question

我目前正在建立一个新的网站，但在webkit浏览器上有一个小小的打击。

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

如果您浏览上面的网址并将浏览器的大小调整为移动尺寸。打开导航（仅在汉堡上单击一次）并调整大小以恢复全屏。您可以看到我的导航向左移动。当您继续调整浏览器大小时，您会看到它越来越向左移动。

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

但我似乎没有找到这个bug。有什么想法吗？

Answer 1

我认为nav li存在问题，请将其更改为display:inline-block.

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

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

还在媒体查询中将其设为display block

响应头与奇怪的webkit bug

1 个答案: