Пиксельное точное позиционирование и разные браузеры

Question

Я делаю одно простое горизонтальное меню с CSS и простым неупорядоченным списком. HTML-код меню следующий:

<div id="navigation">
    <div id="nav-holder">
            <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

А CSS выглядит следующим образом:

#navigation
{
    display: table; 
    height: 35px; 
    width: 100%;
    #position: relative; 
    overflow: hidden;
    background: Black;
}

#nav-holder
{
    #position: absolute; 
    #top: 50%;
    display: table-cell; 
    vertical-align: middle;
}

#navigation ul
{
    #position: relative; 
    #top: -50%; 
}

#navigation ul li
{
    float: left;
}

#navigation ul li a
{
    padding: 5px 10px;
    margin-left: 2px;
    background-color: Red;

    text-decoration: none;
    font-family: Verdana;
    color: White;
}

Я хочу, чтобы у меню было поле в 2 пикселя вокруг всех элементов ссылки. Проблема, с которой я сталкиваюсь, заключается в том, что, хотя в IE она прекрасно себя чувствует со всеми полями прав, но и в Chrome, и в Firefox (оба последние) есть следующие проблемы:

Проблема, похоже, не связана только с этой конкретной реализацией, но я видел, что она возникла из-за вертикального центрирования связей с высотами строк и т. Д.

Я хотел бы найти способ, чтобы все поля выглядели одинаково или каким-то образом, чтобы избежать этой проблемы в целом.

Answer 1

По сути, я разобрался с этой вещью.Я установил один и тот же атрибут line-height и height для всех следующих элементов: ul, li, nav holder.Я сделал это, потому что, когда это не было сделано, все они отображались по-разному от браузера к браузеру.

Кроме того, я полностью удалил позиционирование, вертикальное выравнивание, разделитель hav-holder и затем некоторые.

Answer 2

1001 * попробовать *

display: inline-block;

для вашего # nav-holder