0

現在、新しい Web サイトを作成していますが、Webkit ブラウザーに小さな問題があります。

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

上記の URL にアクセスし、ブラウザをモバイル サイズに変更します。ナビゲーションを開き (ハンバーガーを 1 回だけクリック)、サイズを変更して全画面表示に戻します。ナビゲーションが左に移動したことがわかります。ブラウザのサイズを変更し続けると、ブラウザがますます左に移動することがわかります。

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

ただし、バグが見つからないようです。何か案は？

4

1 に答える 1

0

に問題があると思いますnav li。変更してくださいdisplay:inline-block.

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

これで問題が解決すると思います。

display blockメディアクエリでも作る

于 2013-08-13T12:47:50.757 に答える