导航的 CSS 定位问题

Question

我不完全确定导航是否正确编写，但问题并不总是发生，它要么发生在初始网站加载期间，要么发生在用户浏览几个页面时。问题发生在内容正确定位时，内容与导航的其余部分不一致，只是向下移动约 6-10px 到底部。

.HTML

<div class="nav">
     <ul>
         <li><a href="./" class="brand">ESGator Hosting</a></li>
         <span class="right">
             <li><a href="plans.php">Plans</a></li>
             <li><a href="minecraft.php">Minecraft</a></li>
             <li><a href="about.php">About</a></li>
             <li><a href="support.php">Support</a></li>
             <li><a href="https://esgator.com/panel" class="button"><i class="icon-lock"></i> cPanel</a></li>
             <li><a href="https://esgator.com/mail" class="button" style="margin-left:6px;"><i class="icon-envelope"></i> Mail</a></li>
             <!-- not used <li><a href="feedback.php" class="button feedback" style="margin-left:6px;"><i class="icon-heart"></i></a></li> -->
             </span>
     </ul>
</div>

.CSS

ul, ol, li {
font-size : 1em;
line-height : 1.6;
list-style : none;
}
.nav {
background : transparent;
width : 100%;
display : block;
position : fixed;
top : 0;
z-index : 100;
}
.add-bg {
background : #0a0a0a;
}
.static-bg {
background : #0a0a0a;
}
.nav ul {
width : auto;
max-width : 1024px;
min-width : 640px;
margin : 24px auto;
padding : 8px 0;
}
.nav li {
display : inline;
}
.nav a {
padding : 8px 0;
margin-left : 16px;
color : #7f848a;
font-size : 0.875em;
font-weight : 700;
text-transform : uppercase;
text-decoration : none;
transition : all 400ms;
text-align : left;
}
.nav a:hover, .nav a:focus {
color : #ffffff;
transition : all 400ms;
}
.nav a.active {
color : #ffffff;
}
.nav, .right {
float : right;
}
.nav a.brand {
color : #ffffff;
font-size : 0.875em;
font-weight : 700;
text-transform : uppercase;
text-decoration : none;
margin-left : 0;
transition : all 400ms;
}
.nav a.brand:hover, .nav a.brand:focus {
color : #f14f4f;
transition : all 400ms;
}
.nav a.button {
padding : 8px 10px;
background : #5aac6a;
color : #ffffff;
border-radius : 3px;
border-bottom : 2px solid #5a8a53;
transition : all 400ms;
}
.nav a.button:hover {
background : #6ca04d;
border-bottom : 2px solid #618f44;
color : #ffffff;
transition : all 400ms;
}
.nav a.button.feedback {
color : #f14f4f;
background : #eeeeee;
border-bottom-color : #d4d4d4;
}
.nav a.button.feedback:hover {
color : #f14f4f;
background : #dce0df;
border-bottom-color : #c4c8c7;
transition : all 400ms;
}

http://jsfiddle.net/f9cFP/

或者，您可以参考实际网站，看看我的意思是一个页脚和导航被破坏的实时页面，esgator.com/mail

Answer 1

也许：

.nav, .right {
    text-align: right;
}

而不是：

.nav, .right {
    float : right;
}

浮点有时会产生问题。