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

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，它将停止锚点增加其原始高度：

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

Example fiddle

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

Increasing font size for links on hover changes background color size, how to stop this?

html

css

resize

hyperlink

hover