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

Posted 2023-05-08

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

【英文标题】：Increasing font size for links on hover changes background color size, how to stop this?

【发布时间】：2016-01-12 07:00:28

【问题描述】：

我是 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;

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

【参考方案1】：

为您的悬停设置line-height:18pt，它将停止锚增加它的原始高度：

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

Example fiddle

【讨论】：

不客气，但我刚刚签入了 ie，它似乎有问题，因为它是一个垃圾浏览器！我只是在寻找解决方案

非常感谢，非常感谢！