html - 增加悬停链接的字体大小会改变背景颜色的大小，如何阻止这种情况？

Question

我是 html 和 css 的新手，请多多包涵。我觉得我缺少的东西很简单，但我不知道是什么。

比如我有一个这样的导航栏:

<nav id="navbar">
    <a class="nav" href="#home">Home</a> &#124;
    <a class="nav" href="#link1">Link 1</a> &#124;
</nav>

使用 CSS:

#navbar {
    font-family: "Tahoma", Geneva, sans-serif;
    font-size: 18pt;
    text-align: center;
    background-color: rgba(0,0,0,0.75);
    color: white;
    margin:15px;
    padding: 15px;
}

我已将链接字体设置为在我将鼠标悬停在链接上时增加大小并改变颜色:

a.nav:hover {
    color: red;
    font-size: larger;
}

效果很好，但是当我将鼠标悬停在链接上时，导航栏的背景会向下增加一点，好像要适应我的新文本大小。如何阻止背景改变大小？

Answer 1

为你的悬停设置line-height:18pt，它会阻止 anchor 增加它的原始高度:

a.nav:hover {
  color: red;
  font-size: larger;
  line-height:18pt;
}

Example fiddle