让我简单地说。在包含 5 个文本框的页面上，当您刷新页面时，Chrome 会弄乱页面的样式，从而导致导航栏向下移动。
但是，如果您取出其中一个文本框，那么它将始终正确呈现样式：
.HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="index.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Raleway:500' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,600' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="images/favicon.png" />
<title>Improper Style</title>
</head>
<body>
<header>
<img src="images/placeholder.jpg" height="50px" />
<div id="navbar">
<ul>
<li>
<a href="">My Profile</a>
</li>
<li>
<a href="">Shopping Cart</a>
</li>
<li>
<a href="">Logout</a>
</li>
</ul>
</div>
</header>
<div id="logo" >
<a href="index.html"><h1>Generic Name</h1></a>
<h2>This page has improper format (on refresh)</h2>
</div>
<div id="navbar2">
<ul>
<li id="newCustomer">
<a href="proper.html">Click for page with <br /> correct format</a>
</li>
<li>
<a href="">Shirting</a>
</li>
<li>
<a href="">Trousers</a>
</li>
<li>
<a href="">Blog</a>
</li>
</ul>
</div>
<div id="main">
<form id="signup" method="post" >
<div id="signCol1">
<ul>
<li>
<strong>Email</strong>
</li>
<li>
<input type="email" size="25" maxlength="100" name="email" />
</li>
</ul>
</div>
<div id="signCol2">
<ul>
<li>
<strong>Choose password</strong>
</li>
<li>
<input type="password" size="25" maxlength="100" name="password" />
</li>
</ul>
</div>
<div id="signCol3">
<ul>
<li>
<strong>Repeat password</strong>
</li>
<li>
<input type="password" size="25" maxlength="100" name="pwconfirm" />
</li>
</ul>
</div>
<div id="signCol4">
<ul>
<li>
<strong>First Name</strong>
</li>
<li>
<input type="text" size="25" maxlength="100" name="fname" />
</li>
</ul>
</div>
<div id="signCol5">
<ul>
<li>
<strong>Last Name</strong>
</li>
<li>
<input type="text" size="25" maxlength="100" name="lname" />
</li>
</ul>
</div>
<input type="submit" value="Next Step" />
</form>
</div>
</body>
</html>
.CSS：
html {
overflow-x: hidden;
}
body {
font-size: 16pt;
}
#main {
margin-left: auto;
margin-right: auto;
}
header {
background-color: rgb(59,0,0);
width: 100%;
}
#navbar {
float: right;
}
#navbar ul {
}
#navbar ul li {
list-style: none;
display: inline-block;
padding-right: 20px;
}
#navbar ul li a {
text-decoration: none;
color: blue;
}
#navbar2 {
float: left;
position: relative;
top: 10%;
left: 3%;
font-size: 16pt;
line-height: 300%;
z-index: 5;
}
#navbar2 ul {
list-style: none;
}
#navbar2 ul li a {
text-decoration: none;
color: rgb(100,0,0);
}
#logo {
text-align: center;
clear: right;
margin-left: auto;
margin-right: auto;
position: relative;
top: 5px;
left: 35px;
font-family: bigmouth-reg;
font-size: 20pt;
}
a img {
border: none;
}
#signup {
position: relative;
left: 10%;
}
#signup div {
/*float: left;*/
padding-left: 5%;
padding-right: 5%;
display: inline-block;
text-align: center;
}
#signup div ul {
margin-left: 0;
padding: 0;
}
#signup div ul li {
list-style: none;
padding: 0;
margin-left: 0;
}
#signCol4 {
margin-left: 15%;
}
#newCustomer {
line-height: 120%;
}
#mainVid {
text-align: center;
position: relative;
top: 10%;
right: 5%;
}
#products {
width: 65%;
margin-left: auto;
margin-right: auto;
position: relative;
/*left:5%;*/
}
#products ul {
list-style: none;
float: left;
height: 400px;
}
#products ul li {
width: 200px;
text-align: center;
line-height: 150%;
}
#products ul li img {
height: 300px;
width: 190px;
}
#productHeader {
width: 80%;
color: rgb(59,0,0);
text-align: center;
font-size: 32pt;
position: relative;
left: 5%;
}
.listHeader {
text-align: center;
width: 100%;
position: relative;
/*right:5%;*/
left: 3%;
}
.listHeader hr {
width: 75%;
clear: right;
}
我想
我只是发布正确答案，正如 https://stackoverflow.com/users/1401973/dmi3y 给出的那样。
我只是将图像放在导航栏的div 下方，这似乎已经解决了这个问题。
再次感谢 dmi3y。