尽管不同的CSS和HTML设置，Nav条形图在页面上跳跃

Question

我们的导航栏图像在页面刷新时跳来跳去，我们不知道如何修复它。它似乎只有在页面刷新时才会发生，这表明它与我们的sprite (包含导航条链接的所有图像)的加载有某种关系。

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

这种情况发生在iPads上，也发生在Windows7家庭高级版和OSX10.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)所附的是导航杆跳跃的屏幕截图。

​

​

Answer 1

加载的font-family称为Signika是导致菜单跳转的原因。

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

当然，由于您使用的字体在用户计算机上不可用，因此文本的更改速度仍然仅限于用户下载字体的速度，但至少通过删除nav_bar上的宽度属性，您只需将其“滑动”到右侧即可。

希望这能有所帮助。

Answer 2

这是由于字体呈现在页面加载。

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

Answer 3

​

我用火虫做了这件事，看到了变化，希望能有所帮助。