0
讓我把這個簡單。在包含5個文本框的頁面上，當您刷新頁面時，Chrome會混淆頁面的樣式，導致導航欄向下移動。奇怪的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;
}
如果您將img佔位符移動到div導航欄下方，那麼該怎麼辦？ – dmi3y
可能這個線索http://validator.w3.org/check?verbose=1&uri=http://tdbuchanan.com/index.html – dmi3y
太棒了！你的第一個答案似乎是解決方案;驗證器問題僅存在於我發佈的測試文檔中，實際頁面沒有。 –