Css Chrome和Safari中的链接未对齐_Css_Google Chrome

Css Chrome和Safari中的链接未对齐

css google-chrome

Css Chrome和Safari中的链接未对齐,css,google-chrome,Css,Google Chrome,我正在尝试创建一个左右链接的水平导航左侧的项目似乎没有3px垂直填充，因此与DIV顶部垂直对齐，而右侧的项目垂直对齐正确这在Chrome和Safari中发生，但在Firefox中不发生谁能告诉我我做错了什么，或者我需要做什么才能让Chrome在不改变Firefox行为的情况下正常工作 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Test Navigatio

我正在尝试创建一个左右链接的水平导航

左侧的项目似乎没有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>


测试导航
*{边框：红色实心1px；}
div{边框：绿色实心1px；}
正文{宽度：90%；左边距：5%；}
正文{背景色：#EEEEEE；颜色：#FFFFFF；}
#背景色：#DDDDDD；颜色：#22222；
保证金：1px；
填充：3倍；
溢出：自动；
}
#背景色：#222222；颜色：#DDDDDD；
填充：3px7px；
文字装饰：无；
边框：白色实心1px；
}
#导航a:链接{}
#navFull a:已访问{}
#导航：悬停{背景色：#ddddddd；颜色：#2222222；}
#navFull a:活动{}

左右导航都有3px填充

差异是由于您将元素输入到具有默认边距的右侧导航中。只需为您的输入添加css：

#navFull input{
    margin:0px;
}

现在，如果调整padding:3px以获得更高的值，左侧和右侧将始终受到相同的影响

才华横溢-我的英雄。我花了很长时间试图找出我做错了什么。我不能投赞成票，因为我是新用户。非常感谢