1

我有一个简单的 html ul/li/a 垂直菜单，如下所示：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>

问题是我为 a 标签放置的 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”）底部有一个空格？我必须做什么才能使文本在锚空间中垂直居中？我尝试了各种方法，但没有一个起作用。在发布的示例中，我放置了一个 padding:0px 7px; 对于锚标签，但它不能垂直工作。

发布的代码与 Firefox 有问题，它适用于 Safari。

4

3 回答 3

1

在 CSSa {中，锚标记周围有一个边框和一个填充。如果您将此值设为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;
}
于 2013-05-11T09:28:03.970 回答
1

您应该知道 Gecko 和 WebKit 显然对行高的工作方式有不同的解释。这个小提琴说明了这个问题：http: //jsfiddle.net/w88Ss/。根据定义，Firefox 似乎在做正确的事；无论如何，有这个区别。

字体大小

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

于 2013-05-11T10:00:44.590 回答
0

一种解决方案，让我们说一个简单的解决方法，是只使用某种字体而不是其他字体。

换句话说，我注意到如果在 a 标签的 css 中我指定了像 Arial 这样的字体，那么垂直对齐对于 Firefox 和 Safari 来说是完美的。如果我使用一些其他字体，如 serif、Helvetica，问题仍然存在。

于 2013-05-11T19:38:45.680 回答