html - 我的 CSS 导航栏有时在浏览器中损坏(重新加载时正常)

Question

This是我的页面。

有时当我加载页面时，导航栏会 float 在它应该的位置下方:

当我重新加载页面时，它会自行更正。

你知道为什么吗？有人告诉我这是浏览器懒惰，但如果它一直发生，那就是个问题。

这是 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;
}

它发生在所有浏览器中。

Answer 1

我在 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>