html - anchor 不尊重高度

我有一个很大的文本菜单，其中每个链接都垂直堆叠。问题是活动链接空间重叠在其他菜单项上，因此很难准确单击链接。

示例：http://jsfiddle.net/dhyz48j3/1/

这是源代码：

<div id="menu">
    <span>
        <a href="#" id="still-life">Still&nbsp;Life</a><span class="divider">/</span><br/>
        <a href="#" id="interiors">Interiors</a><span class="divider">/</span><br/>
        <a href="#" id="books">Books</a><span class="divider">/</span><br/>
        <a href="#" id="personal">Personal</a>
    </span>
</div>

CSS：

#menu span, #menu span a {
        font-family: sans-serif;
        font-size: 6.1vw;
        line-height: 4.7vw;
        letter-spacing: -0.0425em;
        text-decoration: none;
        color: #ccc;
        display: inline-block;
        }

#menu span a:hover {
        color: #aaa;
        }

您会在小提琴中看到，链接无法正常工作，因为它们比应有的要大。我该如何解决？

最佳答案

atmd提出的建议对您的代码来说是很好的提示，但不能解决您的问题：

font-size: 6.1vw;
line-height: 4.7vw;

是您的肇事者吗？我可以看到您已完成此操作，以使线条彼此对接并减少行距。您遇到的问题是所使用的字体在字母的上方和下方都有额外的空间，因此整个元素仍然占用6.1vw的空间，甚至认为下一个元素仅比其下方的4.7vw宽，因此锚元素重叠。

解决此问题的方法是，在父元素上同时使用height和overflow:hidden减轻文本元素的额外填充，然后将锚文本放置在父元素中心。一个有效的示例：http://jsfiddle.net/dhyz48j3/3/