Html 我的CSS导航栏在浏览器中有时会被破坏（重新加载时很好）

这是我的页面

有时，当我加载页面时，导航栏会浮动在以下位置：

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

你知道为什么吗？有人告诉我这是因为浏览器懒惰，但如果这种情况持续发生，那就是一个问题

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

---

这种情况在所有浏览器中都会发生。

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

我认为您有填充问题。当我在我的浏览器（firefox）中查看网站时，它显示的FAQ比其他项目悬挂得更远。我希望确保你的图片标题或标题本身没有任何隐藏边框或填充。我认为这是我制作菜单的方式，尝试编码是荒谬的：'（我将宽度设置为特定，我需要更多吗？很可能就是这样。

）我已按规定进行了更改，但在单元格的上半部分有一个小像素间隙？你知道为什么吗？啊，我删除了超链接并改为：
<li class="home-icon1"><a href="http://www.simplypsychics.com/" target="_parent"></a></li>