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

我有一个简单的html ul/li/a垂直菜单，如下所示：

请，我的问题是：为什么链接的文本（“文本”）在底部有一个空格？要使文本在锚定空间中垂直居中，我必须做什么？ 我试过各种方法，但都不起作用。在发布的示例中，我添加了一个填充：0px 7px；对于锚定标记，但它不垂直工作

---

发布的代码与Firefox存在问题，它与Safari配合良好。

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

---

你应该知道Gecko和WebKit对线条高度的工作原理有不同的解释。这把小提琴说明了问题：。根据，Firefox似乎做了正确的事情；无论如何，这是有区别的

---

如果出于任何原因，您认为应该使用这种方法，您可以尝试更高的

行高

，比如

行高：40px

，专门针对firefox，可能使用JS代码。

一个解决方案，比如说一个简单的解决方案，就是只使用一些字体，而不是其他字体

---

换句话说，我注意到，若在标签的css中我指定了一种类似Arial的字体，那个么垂直对齐在Firefox和Safari中是完美的。若我使用一些其他字体，比如serif、Helvetica，那个么问题仍然存在。

你们的意思是什么

（“文本”）底部有一个空格

？你的意思是红色框之间的间隙？在JSFIDLE中，你有

边框：1px实心；

在锚定标记上，这会在红色块之间留出空白，请参阅更新版本：。并且填充不垂直工作，因为你将0px分配给了真实值，请尝试使用不同的n像

padding:10px 7px；

WTF这样的数字你使用的是

display:table/table row/table cell

吗？不要这样做。坚持使用block和inline以及inline block。另外，记住

标记之间的空格经常会被渲染，并且可能是任何奇怪的空间问题的根源。我的问题不是红色b之间的间隙oxes。我的问题是文本“text”和锚定标记的边框底线之间的间隙。我希望锚定中的文本上下有一个零像素空间（确切地说，我希望文本上下到锚定的边框有一个sane X像素空间）.这就是为什么我尝试使用填充，但它在锚点中无法垂直工作，无法正常工作。边框是我用来证明问题的东西。请参阅我上面的评论。水平填充不是问题。你的方法很有趣，但我觉得这似乎不是问题的关键。我的问题是像素space上下锚定标签中的字符：我想将每个锚定标签中的字符串垂直居中，锚定位于ul/li垂直菜单中。考虑到您所说的，我已将锚定的线高度增加到130%，但我仍然有与您在此处看到的相同的问题。如果您只考虑在Firef中解决问题ox，忘记更改

行高

，只需简单地在css定义的末尾添加一个

padding top:3px

。不过，这会破坏你在Chrome和Safari中看到的内容。Kaymar：这不是问题的解决方案，而是将该问题从Firefox转换为Safari。

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

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