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; }

我的字體是Google字體，因此是font-weight屬性。

hovering一個li ，另一個li會稍微移動。 我知道之前曾有人問過這個問題，但是我沒有找到適用於我的樣本的解決方案。

這是一個JSFiddle ，它使事情變得更容易。

Answer 1

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

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

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

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

請參閱此示例修復。 通過減少左邊距，字體大小和字體粗細來實現。

注意：更改字體大小或字體粗細會導致移動是正常現象，因為您需要空間來容納文本大小的增加，否則它將移動。

Answer 2

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

$(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/

或者，您可以使用較深的字體顏色代替粗體文本。