CSS底部邊框懸停「抖動」

Question

我有一個導航欄，當您將鼠標懸停在導航按鈕上時，我想給出橙色底部邊框。唯一的問題是，無論你何時懸停，邊框都會使內容/導航按鈕「抖動」，這是他們不應該的。此外，我在任何時候都在導航欄上有一個黑底部邊框，因此無法改變這一點。

HTML：

<div id="navBarTop"> 
     <ul> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="contact.html">Contact</a></li> 
     </ul> 
</div> 

CSS：

#navBarTop { 
    padding: 0; 
    background-image: url('navBarBackground1.png'); 
    border-bottom: 1px solid #4c4c4c; 
    position: absolute; 
    bottom: 0; 
    text-align: center; 
    left: 0; 
    right: 0; 
} 

#navBarTop ul { 
    list-style: none; 
    width: 800px; 
    margin: 0 auto; 
    padding: 0; 
    display: inline-block; 
} 

#navBarTop li { 
    display: inline-block; 
} 

#navBarTop li a { 
    display: block; 
    padding: 10px 25px; 
    text-decoration: none; 
    font-family: "Arial"; 
    color: #ffffff; 
} 

#navBarTop li a:hover { 
    border-bottom: 2px solid #FF8000; 
} 

Answer 1

的抖動似乎是，當你徘徊在底部添加額外的2px邊界造成的。這會導致文字上升一點。爲了解決這個問題，確保總有一個2px的邊框通過改變你#navBarTop li a這樣：

#navBarTop li a { 
    display: block; 
    padding: 10px 25px; 
    text-decoration: none; 
    font-family: "Arial"; 
    color: #00ffff; 
    border-bottom: 2px solid transparent; // <--- add this line 
} 

這應該穩定你的東西。