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 
} 

这应该稳定你的东西。