导航仅在 IE 6 中的第一个和最后一个 li 链接上反弹

Question

我在 IE 6 中的导航遇到了一个奇怪的问题。当鼠标悬停在上面时，只有导航的第一个和最后一个链接会反弹。

为什么会这样？

我的 CSS 文件：

#navigation {
    width: 930px;
    height: 30px;
    background-color: #f1faff;
    text-align:center;
}

#navigation  ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    line-height: 30px;
}

#navigation  ul li {
    display: inline;
}

#navigation  ul li a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #0067b4;
    display: inline;
    text-decoration: none;
    text-transform: uppercase;
    padding: 7px 50px;
}

#navigation  ul li a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #5e5e5e;
    display: inline;
    text-decoration: none;
    text-transform: uppercase;
    padding: 7px 50px;
}

#navigation  ul li a.first {
    padding-left: 8px;
    margin: 0px;
    overflow: hidden;
    border: 0px;
}

#navigation  ul li a.last {
    padding-right: 8px;
    margin: 0px;
    overflow: hidden;
    border: 0px;
}

发生这种情况的网站可通过http://www.paysonsecure.com/protekskiracing/获得

Answer 1

我会将其添加到您的 global-ie6.css 中

#navigation ul { 显示：内联块； }

Answer 2

谢谢gutierrezalex！我遇到了同样的问题，它可以在我的样式中添加 {display: inline-block;} ..它适用于任何浏览器：

ul.menu li a{
    text-decoration:none;
    color:black;
    display:block;
    padding:0;
    margin:0;
    display:inline-block;
   }

ul.menu li a:hover{
   background-color:#5cc2ed;
   color:#ffffff;
   display:inline-block;
  }