导航栏图像在页面上跳跃，尽管CSS和HTML设置不同

我们的导航栏图像在页面刷新时会跳转，我们不知道如何修复它。它似乎只在页面刷新时出现，这表明它与我们的精灵加载（包含导航栏链接的所有图像）有关

我们尝试过使用不同的浮点值，重新安排元素布局，以及许多不同的选择。我们仍然无法摆脱跳跃。我们已经隔离的另一件事是跳跃与导航栏链接中文本的长度有关，这意味着如果我们缩短每个图像下的文本标签，跳跃将最小化

这发生在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>

复制：

1） 访问www.tekiki.com。第一次访问时，顶部的导航栏链接将跳转

2） 要再现错误，请按Shift-F5

3） 附件是导航栏链接跳跃的屏幕截图

我是用fire bug做的，看到了变化，希望能有所帮助。

---

我使用fire bug完成了这项工作，请查看更改，希望能有所帮助。

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

在页面加载期间，“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”字体后，您可以减小字体大小和/或周围的边距和填充，以防止发生这种情况。

这是由于页面加载时呈现字体造成的

在页面加载期间，“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”字体就位后，您可以减小字体大小和/或周围的边距和填充，以防止出现这种情况。

您加载的名为

Signika

的

字体系列是导致菜单跳转的原因

如果要保留字体系列并删除跳转，只需删除
#header.nav_bar
上的
宽度：720px
。它不是必需的，因为它是浮动的，并且菜单不会“跳转”

当然，由于您使用的字体在用户计算机上不可用，因此文本的更改速度仍将与用户下载字体的速度相同，但至少通过删除导航栏上的“宽度”属性，您只需将其向右“滑动”

希望这有帮助。
您加载的
字体系列
名为
Signika
是导致菜单跳转的原因

如果要保留字体系列并删除跳转，只需删除
#header.nav_bar
上的
宽度：720px
。它不是必需的，因为它是浮动的，并且菜单不会“跳转”

当然，由于您使用的字体在用户计算机上不可用，因此文本的更改速度仍将与用户下载字体的速度相同，但至少通过删除导航栏上的“宽度”属性，您只需将其向右“滑动”

希望这能有所帮助。
在chrome（Mac）上似乎还不错。在firefox上也很好。。它只是需要时间来加载完整的css。。。这不是什么大问题，我想……这在所有浏览器中都很好。我想这个问题是关于他的网站的广告。不，对不起，这不是广告。所以用户不想要我们的网站。我们已经在Windows7家用高级计算机上的iPad和Chrome上看到了错误。你试过按Shift-F5重新加载页面吗？我没有看到任何跳跃-但我建议你从修复HTML错误开始，它在chrome（Mac）上看起来很好。它在firefox上也可以正常工作。。它只是需要时间来加载完整的css。。。这不是什么大问题，我想……这在所有浏览器中都很好。我想这个问题是关于他的网站的广告。不，对不起，这不是广告。所以用户不想要我们的网站。我们已经在Windows7家用高级计算机上的iPad和Chrome上看到了错误。你试过按Shift-F5重新加载页面吗？我看不到任何跳跃-但我建议你从修复HTML错误开始，酷，谢谢。但是，由于我们在中加载字体，这难道不意味着字体是在页面呈现发生之前下载的吗？当使用浮动时，是否提供所需的宽度？否和否。字体开始下载，但不一定在页面加载之前下载，这取决于用户的连接速度。使用浮动时，绝对不需要宽度。酷，谢谢！因此，我想没有办法使用自定义字体并保证不会跳转？不，当浏览器决定其行为时，将跳转效果作为其他内容“隐藏”是符合您的最佳利益的。正如您所指出的，它只在第一页加载时出现，因此如果您可以使用幻灯片方法（如我所述），或者只是删除自定义字体，这些都是您最好的选择。@Crashalot添加高度/溢出将有助于防止最后一个图标出现在其他图标的下方（受宽度影响）。很酷，谢谢。但是，由于我们在中加载字体，这难道不意味着字体是在页面呈现发生之前下载的吗？当使用浮动时，是否提供所需的宽度？否和否。字体开始下载，但不一定在页面加载之前下载，这取决于用户的连接速度。使用浮动时，绝对不需要宽度。酷，谢谢！所以我想没有办法使用自定义字体并保证不会跳转，