垂直菜单中文本下的像素空间ul / li / a

Question

我有一个简单的html ul / li /垂直菜单：http://jsfiddle.net/byXED/3/

<div id="front_page_a">
    <ul id='nav'>
        <li><a href="/">TEXT</a></li> 
        <li class="scostati"><a href="/">TEXT</a></li> 
        <li ><a href="./pages/chi.php"><span>TEXT</span></a></li>
        <li class="scostati"><a href="./pages/dove.php"><span>TEXT</span></a></li>
        <li><a href="./pages/contatti.php"><span>TEXT</span></a></li>
    </ul>
</div>

问题是我为标签添加的css，因为我没有正确的方法在锚标签的文本顶部和底部有相同的空间

#pageNavigation {
    background-image: url('../Images/TIBC_Base/nav-bg.png');
    background-repeat: repeat-y;
    margin:5px 0;
    padding:5px 15px 5px;
    min-height:125px;
}

#pageNavigation .navContent {
    display: table;
    width:240px;
    list-style-type: none;
    margin:0; padding:0;
}

#pageNavigation .navContent li {
    display: table-row;
    height:57px;
    text-align:center;
}

#pageNavigation a  {
    display: table-cell;
    vertical-align: middle;
    height:57px;
    border-top:0px #E1E1E1 solid;
    border-bottom:1px #E1E1E1 solid;
    font-size:16px;
    text-decoration:none;
    color:#485963;
    text-shadow: 0px -1px #EEEEEE;
}

请问，我的问题是：为什么链接的文本（“TEXT”）底部有空格？我要做的是让文本在锚空间中垂直居中？ 我尝试了各种各样的方法，但没有任何功能。在已发布的示例中，我添加了一个填充：0px 7px;对于锚标记但它不能垂直工作。

发布的代码存在Firefox的问题，它适用于Safari。

Answer 1

在CSS a {中，您有一个围绕锚标记和填充的边框。如果将此值设为0（零），则“额外空间”会消失。

a {
    line-height:100%;
    display:table-cell;
    text-decoration: none;
    background-color:red;
    border: 0px solid; /*changed to zero, removes border*/
    font-size: 35px;
    padding: 0px 0px; /*changed to zero, removes horiz space before&after text*/
    color:white;
    vertical-align: middle;
}

Answer 2

你应该知道Gecko和WebKit显然对行高的工作方式有不同的解释。这个小提琴说明了问题：http://jsfiddle.net/w88Ss/。根据{{​​3}}，似乎Firefox正在做正确的事情;无论如何，有这种差异。

如果您认为，无论出于何种原因，您应该使用此方法，您可以尝试更高line-height，例如line-height:40px，专门针对firefox，也许使用JS代码。

Answer 3

一个解决方案，比如一个简单的解决方法，就是只使用某种字体而不是其他字体。

换句话说，我注意到如果在a标签的css中我指定了像Arial这样的字体，那么垂直对齐对于Firefox＆amp;苹果浏览器。如果我使用其他一些字体，如serif，Helvetica问题仍然存在。