增加懸停鏈接的字體大小會改變背景顏色大小，如何阻止此問題？

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