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
}