仅在第一次加载时 NAV 在 Chrome 上错位答案

【问题标题】：NAV misplaced on Chrome only on the first load仅在第一次加载时 NAV 在 Chrome 上错位
【发布时间】：2014-02-01 15:52:15
【问题描述】：

我在 Google Chrome 上的网站标题遇到了一点问题。第一次加载网页时，导航栏放错了位置，但是如果我刷新页面，导航栏就放好了。我不明白为什么我和使用 Google Chrome 的朋友总是会出现这个错误。

这是它在页面第一次加载时的显示方式（错位）：

这是刷新页面后的样子（放置得当）：

现在这是标题的 HTML 描述：

<header>
    <div id="head1">
        <h1>Léo Dupont</h1>

        <nav>
            <ul>
                <li><a href="#">E1</a></li>
                <li><a href="#">E2</a></li>
                <li><a href="#">E3</a></li>
                <li><a href="#">E4</a></li>
                <li><a href="#">E5</a></li>
            </ul>
        </nav>
    </div>

    <h2>ESIEE Paris - Deuxième année</h2>
</header>

这是 CSS 部分：

@import url(http://fonts.googleapis.com/css?family=Tangerine:700);

body {
    margin:0;
}

/* HEADER */
header, header h1, header h2 {
    color:white;
    margin:0;
}

/* HEADER : high */
header #head1 {
    height:80px;
    background-color:#006400;
}
header h1 {
    display:inline-block;
    height:100%;
    vertical-align:top;
    font-family:'Tangerine', cursive;
    font-size:100px;
}

/* HEADER : low */
header h2 {
    text-align:center;
    background-color:#008000;
    height:40px;
    line-height:40px;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:normal;
}

/* HEADER : NAVIGATION */
header nav {
    display:inline-block;
    position:absolute;
        right:0px;
    vertical-align:middle;
}
header nav ul {
    list-style-type:none;
}
header nav li {
    display:inline-block;
    margin-right:30px;
    width:55px;
    height:55px;
    background:white;
    border-radius:50%;
    border:none;
    color:#fff;
}
header nav li a {
    position: relative;
        top: 18px;
        left: 16px;
    font:bold 14pt Arial;
    text-decoration:none;
    color:black;
}

有人知道我该如何解决这个问题吗？

【问题讨论】：

如果您删除 Google 字体，它会消失吗？
不，即使没有@import，该错误仍然存在。

标签： html css google-chrome nav

【解决方案1】：

我制作了一个包含您的代码的 jsfiddle：

http://jsfiddle.net/rfm4u/

在问这些问题时请这样做 - 这样更容易提供帮助。

我无法解释为什么您有时会看到一种行为与另一种行为。我认为这种不一致很可能是 Chrome 渲染引擎的问题。我检查了 Chrome 开发工具中的 <nav> 元素，并打开和关闭了 display: inline-block; 属性。当我关闭它时，我看到导航菜单跳到底部，就像你在第一个屏幕截图中看到的那样，但奇怪的是，在将其重新设置为打开后，它并没有跳回 - 它只是停留那里。之后切换属性没有做任何事情。

但是，我看到您当前是如何定位 <nav> 元素的，并注意到您实际上并没有真正控制它的垂直位置。您可能认为 vertical-align: middle 位正在控制它，但由于您在其上使用绝对定位，因此您已将 <nav> 元素从正常的文档流中取出，因此您实际上并没有相对于<div id="head1"> 就像你想象的那样。垂直对齐属性令人困惑：您可能想看看this。

有几个可能的修复 - 选择你最喜欢的一个。

方法一：显式设置垂直位置

只需在header nav 样式上添加top: 5px;（或您喜欢的任何值）即可。现在您可以显式控制位置，而不是任由机会（或浏览器古怪的渲染引擎）。

你失去的是垂直居中，从代码来看，这是你想要的。使用这种方法，如果您更改了 <div id="head1"> 的高度，您还需要手动调整导航定位。

方法 2：使用绝对垂直居中技术

无论容器大小如何，您都可以使用一个技巧来垂直居中内容。这里有一篇很好的深入文章：

http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

在你的情况下，这将需要一个小的调整，因为你实际上并不想将 <nav> 相对于 <div id="head1"> 水平居中 - 你希望它保持在右边，所以你只需要离开关闭left: 0; 部分。

这是应用此技术所需的操作。

在header #head1 样式上设置position: relative; 属性。这是必需的，因为您希望将<nav> 相对于<div id="head1"> 垂直居中，而不是<body>。如果您不了解相对位置的工作原理，您需要记住的是：

An element with relative positioning gives you the control to absolutely position children elements inside of it

使用height: 87px; 之类的东西在header nav 上声明一个明确的高度。这是上述技巧起作用所必需的（尽管在上面的文章中提到了一些解决方法）。
在header nav 上将top、bottom 和right 属性设置为0（注意我们省略了left: 0 以避免水平居中），并且还设置@ 987654350@ 属性，如技术中所述。

这是一个演示结果的小提琴：

http://jsfiddle.net/ajfUK/2/

您可以尝试在 Chrome 的开发工具中更改 #head1 元素的高度，并观察 <nav> 保持垂直居中。

【讨论】：

非常感谢！我现在将使用方法 n°1，因为它对于设计来说已经足够了。但我会记住方法 n°2，它非常有用。也感谢 jsfiddle.net 提示。