增加悬停链接的字体大小会改变背景颜色大小，如何阻止此问题？

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