css - 像素精确定位和不同的浏览器

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;
}

我希望菜单在所有链接元素周围有 2px 的边距。我面临的问题是，虽然它在 IE 中呈现良好的所有权利边距，但 Chrome 和 Firefox(都是最新的)都存在以下问题:

这个问题似乎并不仅仅与这个特定的实现有关，但我已经看到它从垂直居中链接与行高等方面上升。

我想找到一种方法让所有边距看起来都一样，或者找到某种方法来一起避免这个问题。

Answer 1

基本上，我已经解决了这个问题。我将相同的行高和高度属性设置为以下所有内容:ul、li、nav holder。我这样做是因为当它没有完成时，所有这些在不同浏览器中的呈现方式都不同。

此外，我完全删除了定位、垂直对齐、hav-holder div，然后删除了一些。