This是我的页面。
有时当我加载页面时，导航栏会浮动到应该位于的位置：
http://i62.tinypic.com/2uts3kg.jpg
当我重新加载页面时，它会自行纠正。
你知道为什么吗？我被告知浏览器是懒惰的，但如果它继续发生则会出现问题。这是HTML代码：
<div id="header">
<div id="headercontainer">
<div id="headerpurpleback">
<div id="headertexttop">
Genuine psychics, clairvoyants and mediums are available now for a private reading.<a href="#">Find a Psychic now! >></a>
</div>
<div id="headerwhiteback">
<div id="logo"><a href="http://www.simplypsychics.com" target="_parent">
<img src="images/logo.png" alt="SimplyPsychics.com" border="0" /></a></div>
<div id="headerpricebadge"></div>
<div id="headerctanumber">Live 1-2-1 Psychic Readings for just 99p/minute</div>
<div id="headernumber">0207 111 6380</div>
<ul id="nav">
<a href="http://www.simplypsychics.com/" target="_parent"><li class="home-icon1"></li></a>
<li class="home-icon2"><a href="http://www.simplypsychics.com/readers/" target="_parent">FIND A PSYCHIC READER</a></li>
<li class="home-icon3"><a href="http://www.simplypsychics.com/readings/" target="_parent">PSYCHIC READINGS</a></li>
<li class="home-icon4"><a href="http://www.simplypsychics.com/book/" target="_parent">BOOK A PSYCHIC READING</a></li>
<li class="home-icon5"><a href="http://www.simplypsychics.com/psychicreadings/" target="_parent">FIND OUT MORE</a></li>
<li class="home-icon6"><a href="http://www.simplypsychics.com/help/" target="_parent">HELP/FAQ</a></li>
</ul>
</div>
这是我正在使用的CSS（我之前从未做过CSS，所以可能就是这样）：
div#header {
height: 207px;
}
div#logo {
height: 74px;
width: 334px;
position: absolute;
top:13px;
left:15px;
}
div#headercontainer {
width: 970px;
margin-left: auto;
margin-right: auto;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
height: 207px;
}
div#headerpurpleback {
width: 970px;
margin-left: auto;
margin-right: auto;
background-color: #9a3ba8;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.18);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.18);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.18);
height: 207px;
}
div#headertexttop, a:link, a:visited, a:active, a:hover {
font-family:"Century Gothic", CenturyGothic, AppleGothic, 'Muli', sans-serif;
font-size: 14px;
letter-spacing:-1px;
font-weight: normal;
color: #f8c7ff;
padding-top: 5px;
padding-left: 10px;
}
div#headertextbottom, a:link, a:visited, a:active, a:hover {
font-family:"Century Gothic", CenturyGothic, AppleGothic, 'Muli', sans-serif;
font-size: 15px;
letter-spacing:-1px;
font-weight: bold;
color: #ffffff;
padding-top: 155px;
padding-left: 5px;
text-align: center;
}
div#headerwhiteback {
width: 960px;
height: 140px;
background-color: #ffffff;
border-radius:10px;
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.18);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.18);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.18);
margin-left: 4px;
position: absolute;
top:30px;
right:10%px;
left:10%px;
}
div#headerctanumber {
font-family:"Century Gothic", CenturyGothic, AppleGothic, 'Muli', sans-serif;
font-size: 16px;
letter-spacing:-1px;
font-weight: bolder;
color: #4a4a4a;
position: absolute;
top:15px;
right:15px;
}
div#headernumber {
font-family:"Century Gothic", CenturyGothic, AppleGothic, 'Muli', sans-serif;
font-size: 55px;
letter-spacing:-2px;
font-weight: bolder;
color: #9a3ba8;
position: absolute;
top:25px;
right:15px;
}
div#headerpricebadge {
background-image:url(../images/99pminpsychics.jpg);
height: 71px;
width: 71px;
position: absolute;
top:13px;
right:365px;
}
div# {
height: 74px;
width: 334px;
position: absolute;
top:13px;
left:15px;
}
#nav {
width: 924px;
position: absolute;
top: 98px;
left: 17px;
float: left;
margin: 0 0 64px 0;
padding: 0;
list-style: none;
background-image:url(../images/menubanner.png);
background-color: #f5c3fd;
border-radius:7px;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 1px 3px 1px rgba(0, 0, 0, 0.05);
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #494949;
border-right: 1px solid #fceaff;
}
#nav li a:hover {
color: #822e8e;
}
#nav .home-icon1 {
background: url(../images/icon-home.png) no-repeat center;
width: 39px;
height: 34px;
background-color: #494949;
color: #f5c3fd;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
position: relative;
border-right: 1px solid #fceaff;
float: left;
padding: 0;
list-style: none;
}
#nav .home-icon1 a:hover {
background: url(../images/icon-home.png) no-repeat center;
width: 39px;
height: 34px;
background-color: #494949;
color: #f5c3fd;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
position: relative;
border-right: 1px solid #fceaff;
float: left;
margin: 0 0 0 0;
padding: 0;
list-style: none;
}
#nav .home-icon2 {
background: url(../images/icon-findapsychic.png) no-repeat left;
padding: 0px 0px 0px 15px;
}
#nav .home-icon3 {
background: url(../images/icon-psychicreadings.png) no-repeat left;
padding: 0px 0px 0px 25px;
}
#nav .home-icon4 {
background: url(../images/icon-bookareading.png) no-repeat left;
padding: 0px 0px 0px 22px;
}
#nav .home-icon5 {
background: url(../images/icon-aboutus.png) no-repeat left;
padding: 0px 0px 0px 30px;
}
#nav .home-icon6 {
background: url(../images/icon-help.png) no-repeat left;
padding: 0px 0px 0px 14px;
}
它发生在所有浏览器中。
答案 0 :(得分：2)
当我改变时，我不再在Firefox和Opera中遇到问题：
<a href="http://www.simplypsychics.com/" target="_parent"><li class="home-icon1"></li></a>
到：
<li class="home-icon1"><a href="http://www.simplypsychics.com/" target="_parent"></a></li>