Chrome和Safari中的链接未对齐

我正尝试使用右侧和左侧的链接创建一个水平导航。Chrome和Safari中的链接未对齐

左边的项目看起来没有3px垂直填充，所以垂直对齐DIV的顶部，而右边的项目正确垂直对齐。

这发生在Chrome和Safari中，但不在Firefox中。

任何人都可以告诉我我做错了什么或者我需要做什么来使Chrome工作而不改变Firefox的行为。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Test Navigation</title> 
    <style> 
    * { border: red solid 1px; } 
    div { border: green solid 1px; } 
    body { width: 90%; margin-left: 5%; } 
    body { background-color: #EEEEEE; color: #FFFFFF; } 

    #navFull { background-color: #DDDDDD; color: #222222; 
     margin: 1px; 
     padding: 3px; 
     overflow: auto; 
    } 
    #navFull a { background-color: #222222; color: #DDDDDD; 
     padding: 3px 7px; 
     text-decoration: none; 
     border: white solid 1px; 
    } 
    #navFull a:link {} 
    #navFull a:visited {} 
    #navFull a:hover {background-color: #DDDDDD; color:#222222; } 
    #navFull a:active {} 
    </style> 
</head> 
<body> 
    <div id=pgFull> 
    <div id=navFull> 
     <span id=navLeft> 
      <a href=#>&nbsp;&nbsp;&nbsp;Albums&nbsp;&nbsp;&nbsp;</a> 
      <a href=#>&nbsp;&nbsp;&nbsp;Tags&nbsp;&nbsp;&nbsp;</a> 
     </span> 


     <span id=navRight style="float:right;"><a href=#>&nbsp;&nbsp;&nbsp;Contact&nbsp;&nbsp;&nbsp;</a> 
      <a href=#>&nbsp;&nbsp;&nbsp;Help&nbsp;&nbsp;&nbsp;</a> 
      <input type="button" value="&nbsp;&nbsp;&nbsp;styled text button&nbsp;&nbsp;&nbsp;" 
       style="background-color:#c00; color:#fff;" /> 
     </span> 
    </div> 
    </div> 

</body> 
</html>

来源

2013-10-11 mcl