CSS导航列表项目出现在导航div下方。但看起来在Chrome中找到了？

Question

我的导航在Chrome中看起来不错，但在Firefox和IE中，列表项目显示在导航容器div下方（约15个像素）。有人可以帮助我吗？

以下是链接：http://jwstudio.us/bkpa/

CSS：

nav {

position: relative;
background-image: none;
background-repeat: no-repeat;
float: left;
background-color: #DBD0CA;
z-index: 3;
margin-top: -115px;
margin-left: -2px;
height: 29px;
width: 945px;
margin-right: 10px;
background-position: left;

}

nav ul {

position: relative;
display: inline;
list-style-type: none;
height: 27px;
z-index: 4;
padding-top: 3px;
margin-top: -115px;

}

nav ul li a {

position: relative;
height: 27px;
float: left;
z-index: 5;
text-align: left;
padding-left: 11px;
list-style-type: none;
text-decoration: none;
color: #8F181B;
font-weight: normal;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 0px;
background-color: #DBD0CA;

}

nav ul li a：hover，a：active {

position: relative;
height: 27px;
color: #FFF;
background-image: url(images/nav_rollover.png);
z-index: 6;
padding-top: 3px;

}

Answer 1

您需要重置ul上的填充，因为左边的填充会导致元素转到下一行：

nav ul {

  position: relative;
  display: inline;
  list-style-type: none;
  height: 27px;
  z-index: 4;
  padding-top: 3px;
  margin-top: -115px;
  padding: 0;          // added
}