我的网站在 Google Chrome 浏览器中遇到了一些小问题。 第一次加载网页时，导航栏放错了位置，但是如果我刷新页面，导航栏就放对了。我不明白为什么我和使用 Google Chrome 的 friend 总是出现这个错误。
这是它在第一次加载页面时的显示方式(错位):
这是刷新页面后的样子(位置合适):
现在这是 header 的 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;
}
有人知道我该如何解决这个问题吗？
最佳答案
我制作了一个包含您的代码的 jsfiddle:
请在提出此类问题时这样做 - 这样更容易提供帮助。
我无法解释为什么您有时会看到一种行为与另一种行为的对比。我认为不一致很可能是 Chrome 渲染引擎的问题。我检查了 <nav> Chrome 开发工具中的元素并翻转 display: inline-block;属性开启和关闭。当我关闭它时，我看到导航菜单跳到底部，就像你在第一个屏幕截图中看到的那样，但奇怪的是，在将它重新打开后，它并没有跳回来 - 它只是保持不变那里。之后切换属性没有做任何事情。
但是，我看到您目前如何定位 <nav>元素并注意到你并没有真正控制它的垂直位置。你可能会认为 vertical-align: middle位正在控制它，但由于您在其上使用绝对定位，因此您已经使用了 <nav>元素超出正常的文档流，所以你实际上并没有将它相对于 <div id="head1"> 垂直居中就像你想的那样。 vertical-align 属性令人困惑:您可能想看看 this .
有几种可能的修复方法 - 选择您最喜欢的一种。
方法一:明确设置垂直位置
只需添加一个top: 5px; (或您喜欢的任何值)在 header nav 上风格。现在您可以明确地控制位置，而不是靠运气(或浏览器古怪的渲染引擎)。
您失去的是垂直居中，从代码来看，这是您想要的。使用这种方法，如果您更改了 <div id="head1"> 的高度，您还需要手动调整导航定位。
方法 2:使用绝对垂直居中技术
有一个技巧可以使内容垂直居中，而不管容器的大小。这里有一篇很好的深入文章:
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
在您的情况下，这需要稍作调整，因为您实际上并不想将 <nav> 居中水平相对于 <div id="head1"> - 你希望它保持在右边，所以你只需要离开 left: 0;部分。
以下是应用此技术需要执行的操作。
- 设置
position: relative;header #head1上的属性(property)风格。这是必需的，因为您希望垂直居中<nav>相对于<div id="head1">, 不是<body>.如果您不知道相对位置的工作原理，您只需要记住:
在
header nav上声明一个明确的高度使用类似height: 87px;的东西.这是上述技巧起作用所必需的(尽管上面的文章中提到了一些解决方法)。设置
top,bottom, 和rightheader nav上的属性为 0 (注意我们省略了left: 0以避免水平居中)，并且还设置了margin: auto;属性，如技术中所述。
这是演示结果的 fiddle :
您可以尝试更改 #head1 上的高度Chrome 开发工具中的元素，并观察 <nav>保持垂直居中。
关于html - NAV 仅在第一次加载时错位在 Chrome 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21500188/