運動對CSS懸停造成的字體大小的變化

Question

我的菜單：

<div id="menu_container"> 
    <ul> 
     <li>Portfolio</li> 
     <li>About</li> 
     <li>Contact</li> 
    </ul> 
</div><!--//menu_container--> 

我的CSS：

#menu_container { text-transform: uppercase; font-size: 1.3em; font-style: bold; font-family: 'Lato', sans-serif; float: left; height: 100%; } 
#menu_container ul { list-style-type: none; display: inline-block; vertical-align: middle; } 
#menu_container ul li { display: inline-block; margin-left: 20px; text-decoration: none; color: #4e918b; } 
#menu_container ul li:hover { font-weight: 900; } 

我的字體是谷歌的字體，因此font-weight財產。

當hovering a li，其他li略有移動。我知道這個問題之前已經被問過，但是我沒有找到適合我的樣本的解決方案。

這是一個JSFiddle使事情更容易。

Answer 1

發生這種情況是因爲元素寬度是流體，並且由文本的寬度決定，當字體爲粗體時寬度增加。您可以通過確定各個元素的計算寬度並將其寬度設置爲該問題來解決問題。沿此線的東西：

$(document).ready(function(){ 
    $("#menu_container ul li").each(function(){ 
    var $this = $(this); 
    var width = $this.width(); 
    $this.css("width", width); 
    }); 
}); 

http://jsfiddle.net/yvxb1os1/20/

或者，你可以在地方粗體文字的使用深色字體顏色。

Answer 2

只需調整包含元素的寬度或減小頁邊空白值，如下所示。

#menu_container ul li { 
    margin-left: 10px; 
    } 

下面是一些其他的解決方案的問題

1. 減小字體大小
2. 增加包含元素的寬度。從而準備增加字體大小並停止移動。您可以調整寬度，直到沒有移動。
3. 刪除或減少字體重量。

See this example fix.通過減少空白左邊，字體大小和字體權重來實現。

注：這僅適用於字體大小或字體粗細的變化正常引起的運動，因爲你需要空間來容納文本或其他的尺寸的增加，它會移動。