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