如何防止div的移动，当我将鼠标悬停改变它

Question

http://bit.ly/1fVGrBT

以上尺寸的元素在这里是我的网站。当你悬停在问题上并离开时，它下面的div被上下推动。解决方案也一样。任何想法或提示如何防止它移动？

我认为这是由于改变字体大小和下划线，但我不知道我能做什么。

Answer 1

设置CSS line-height定为文本的高度<h3>标签

Answer 2

这似乎是解决这个问题对我来说：

#switcher { 
    display: inline-block; 
    margin: 0; 
    overflow: hidden; 
    max-height: 30px; 
} 

基本上我说的容器不扩大超过30像素的高度。

Answer 3

悬停，您放大文本，从而容器。这推动了其余的内容。

3解决方案：

1. 使用transform: scale(1.2);放大文本。这不会影响文档的流向。将此添加到您的element:hover。请记住添加浏览器前缀。更多here

   例子：

   #switcher li:hover { 
   transform: scale(1.2); 
   } 
   

2. 添加height到您的导航。这将锁定容器高度。

3. 上无论是导航还是内容添加position: absolute。这将它们从文档流中移除，因此不会相互影响。