FireFox和Chrome之间的CSS问题

Question

好的，这是我之前提出的here问题的延续。

我有一个asp.net菜单控件，其样式为无序列表，在chrome和firefox中呈现的略有不同。我确信这是由于我的CSS中的错误，而不是两个浏览器之间的怪癖。

我重新创建了菜单here。

以下是描述问题的屏幕截图（顶部是Chrome，底部是FireFox）：

任何想法？

Answer 1

因为你提供的demo似乎在IE中毫无希望，我制作了新的CSS来配合您的HTML，试图保持旧CSS的行为：

（在IE7 / 8，Firefox，Chrome中测试）

Live Demo

您的HTML（略有变化：href="#" / class="selected"）：

<div class="header">
    <div class="headerInner">

        <div class="hideSkipLink">
         <div class="menu">   
          <ul>
              <li><a href="#">Test 1</a></li>
              <li><a href="#" class="selected">Test 2</a></li>
              <li><a href="#">Test 3</a></li>
            </ul>
         </div>
        </div>

    </div>
</div>

新CSS：

.header {
    font: 12px/18px Tahoma,arial,sans-serif;
    height: 33px;
    background: #666;
    border-bottom: 2px solid #a10000;
}
.header ul {
    margin: 0;
    padding: 8px 0 0 0;
    list-style: none;
    height: 33px
}
.header li {
    display: inline
}
.header li a {
    float: left;
    display: block;
    margin: 0 0 0 4px;
    padding: 3px 20px 0 20px;
    height: 22px;
    text-align: center;
    color: #fff;
    text-decoration: none
}
.header li a:hover {
    border: 1px solid #fff;
    border-bottom: none;
    padding: 2px 19px 0 19px;
}
.header li .selected, .header li a:active {
    font-weight: bold;
    color: #000;
    background: #fff;
    border: 2px solid #a10000 !important;
    border-bottom: none !important;
    padding: 3px 20px 0 20px !important;
}

Answer 2

检查元素上的填充。他们似乎都转移了几个像素。另外，你能给我们CSS吗？