Проблема CSS между FireFox и Chrome

Question

Хорошо, это продолжение моего предыдущего вопроса, найденного здесь .

У меня есть элемент управления меню asp.net, стилизованный как неупорядоченный список, который немного отличается в Chrome и Firefox Я убежден, что это связано с ошибкой в ​​моем CSS, а не с причудой между двумя браузерами.

Я воссоздал меню здесь .

Вот снимок экрана с изображением проблемы (Chrome сверху, FireFox снизу):

Есть идеи?

Answer 1

Поскольку предоставленная вами демонстрация выглядела довольно безнадежно в 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, пожалуйста?