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

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

基本上，我把这个东西整理好了。我将相同的line-height和height属性设置为以下所有：ul，li，nav holder。我这样做是因为当它没有完成时，所有这些在浏览器之间的呈现方式都不同。

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

Answer 2

试

display: inline-block;

为你的＃nav-holder