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

1

这是由于页面加载时的字体渲染。

在页面加载期间，加载“Signika”字体 - 覆盖之前的任何字体。

body, p, ol, ul, td {
  font-family:'Signika', verdana, tahoma, arial, sans-serif;
}

显然，字体/元素的各个方面会随着不同的字体类型/系列而变化。特别是这种字体，Signika，看起来比后备字体 Verdana 大很多。

禁用“Signika”字体，因此备用字体生效：

font-family:verdana, tahoma, arial, sans-serif;

您会看到出现“跳跃”导航（我在 Chrome 中看到）。

使用“Signika”字体，您可以减小字体大小和/或周围的边距和填充，以防止这种情况发生。

于 2013-10-25T22:03:54.290 回答
0

在此处输入图像描述 在此处输入图像描述 我使用火虫做到了这一点，看看变化希望它可以帮助..

于 2013-10-23T07:39:43.907 回答
0

font-family您加载的调用Signika是导致菜单跳转的原因。

如果您想保留字体系列并删除跳转，则只需删除width: 720pxon #header .nav_bar。它不是必需的，因为它是浮动的，菜单不会“跳转”。

当然，因为您使用的字体在用户计算机上不可用，所以文本仍然会随着用户下载字体的速度而改变，但至少通过删除 nav_bar 上的 width 属性，您只需使其“滑动” “ 向右。

希望这可以帮助。

于 2013-10-25T22:15:09.497 回答