1

ページの更新時にナビゲーション バーの画像が飛び回ってしまい、修正方法がわかりません。ページが更新されたときにのみ発生するようです。これは、スプライト (ナビゲーション バー リンクのすべての画像を含む) の読み込みに何らかの関係があることを示唆していますか?

さまざまな float 値を試したり、要素のレイアウトを再配置したり、さまざまな選択肢を試したりしました。私たちはまだジャンプを取り除くことができません。私たちが分離したもう1つのことは、ジャンプがナビゲーションバーリンクのテキストの長さに関係していることです。つまり、各画像の下のテキストラベルを短くすると、ジャンプが最小限に抑えられます.

これは iPad で発生し、Windows 7 Home Premium および OS X 10.7.5 の Chrome でも発生します。

ナビゲーション バーの HTML は次のとおりです。

<div id="header">               
        <div class="main">
            <a class="logo" href="/"><img class="" src="/images/web/logos/text_small.png" alt="Domain Name Registration and Search"></a>
            <div class="nav_bar">
                <a class="games icon_rise" href="/itunes-store/apps/free-apps/category/all-games?itunes-store-id=888-6014">
                    <div class="icon"></div>
                    <div class="label click_drop">Games</div>
                </a>
                <a class="education icon_rise" href="/itunes-store/apps/free-apps/category/education?itunes-store-id=6017">
                    <div class="icon"></div>
                    <div class="label click_drop">Education</div>
                </a>
                <a class="entertainment icon_rise" href="/itunes-store/apps/free-apps/category/entertainment?itunes-store-id=6016">
                    <div class="icon"></div>
                    <div class="label click_drop">Entertainment</div>
                </a>
                <a class="lifestyle icon_rise" href="/itunes-store/apps/free-apps/category/lifestyle?itunes-store-id=6012">
                    <div class="icon"></div>
                    <div class="label click_drop">Lifestyle</div>
                </a>
                <a class="music icon_rise" href="/itunes-store/apps/free-apps/category/music?itunes-store-id=6011">
                    <div class="icon"></div>
                    <div class="label click_drop">Music</div>
                </a>
                <a class="utilities icon_rise" href="/itunes-store/apps/free-apps/category/utilities?itunes-store-id=6002">
                    <div class="icon"></div>
                    <div class="label click_drop">Utilities</div>
                </a>
                <a class="all_apps icon_rise" href="/itunes-store/apps/free-apps/all">
                    <div class="icon"></div>
                    <div class="label click_drop">All Apps</div>
                </a>
            </div>
        </div>
    </div>

CSSは次のとおりです。

#header { text-align:left; height:75px; background:url(/images/web/header_slice.png) repeat-x; }
#header .logo { position:relative; top:15px; width:106px; display:inline-block; }
#header .logo img { width:106px; height:35px; }

#header .nav_bar { width:720px; float:right; display:inline-block; position:relative; top:12px; text-align:right }
#header .nav_bar a { display:inline-block; margin-left:30px; max-width:100px; }

#header .nav_bar .icon { width:25px; height:25px; background:url(/images/web/nav_bar_icons.png) no-repeat; background-size:295px 70px; margin:auto; }
#header .nav_bar .games .icon { background-position:-45px 0 }
#header .nav_bar .education .icon { background-position:-90px 0 }
#header .nav_bar .entertainment .icon { background-position:-135px 0 }
#header .nav_bar .lifestyle .icon { background-position:-180px 0 }
#header .nav_bar .music .icon { background-position:-225px 0 }
#header .nav_bar .utilities .icon { background-position:-270px 0 }

#header .nav_bar .label { color:#00435d; font-size:15px; font-weight:bold; text-align:center; }
#header .nav_bar a:hover { text-decoration:none }

再現するには：

1) www.tekiki.com にアクセスします。初めてアクセスすると、上部のナビゲーション バー リンクがジャンプします。

2) エラーを再現するには、 を押しShift-F5ます。

3) ナビゲーション バー リンクのジャンプのスクリーン ショットが添付されています。

ここに画像の説明を入力

4

3 に答える 3

0

呼び出されたfont-family読み込みSignikaが、メニューがジャンプする原因です。

font-family を保持してジャンプを削除したい場合は、単にwidth: 720pxon を削除して#header .nav_barください。フローティングなので必須ではなく、メニューは「ジャンプ」しません。

もちろん、ユーザーのコンピューターで利用できないフォントを使用しているため、テキストはユーザーがフォントをダウンロードするのと同じ速さでしか変化しませんが、少なくとも nav_bar の width プロパティを削除することで、単純に「スライドさせます」 " 右の方へ。

お役に立てれば。

于 2013-10-25T22:15:09.497 に答える
0

ここに画像の説明を入力 ここに画像の説明を入力 私は火のバグを使用してこれを行いました.変更が役立つことを願っています..

于 2013-10-23T07:39:43.907 に答える