크롬과 사파리의 링크가 잘못 정렬되었습니다.

오른쪽과 왼쪽에 링크가있는 가로 탐색을 만들려고합니다.크롬과 사파리의 링크가 잘못 정렬되었습니다.

왼쪽의 항목은 3px 세로 패딩이 없으므로 DIV의 맨 위에 세로로 정렬되지만 오른쪽 항목은 세로로 올바르게 정렬됩니다.

이것은 Chrome과 Safari에서 발생하지만 Firefox에서는 발생하지 않습니다.

누구나 내가 잘못했거나 Firefox의 동작을 변경하지 않고 Chrome을 작동시키기 위해해야 할 일을 말해 줄 수 있습니까?

<!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