事務中的寬度調整大小問題

Question

我有一個我製作的小動畫的問題。我有一組垂直顯示的圖標，當您將鼠標移動到其上時，每個圖標都會顯示相關文本。

問題是，如果您將鼠標移到第四個圖標上，然後轉到第三個圖標上，您會注意到文本被調整了兩次。我的意思是它首先結束動畫，但是它會調整包含文本的段落的大小以適應實際寬度。雖然不太明顯，但第一個圖標也會出現問題。

對於我所能理解的不是一個瀏覽器錯誤，因爲它發生在所有瀏覽器上。

你知道爲什麼瀏覽器以這種方式行事，以及如何解決？

我的HTML如下：

<aside id="social-bar"> 
    <div id="facebook"> 
     <a href="#"> 
     <img src="icon.png" alt="Facebook icon" /> 
     <p>Like us on Facebook</p> 
     </a> 
     <br class="clear-both" /> 
    </div> 
    <div id="twitter"> 
     <a href="#"> 
     <img src="icon.png" alt="Twitter icon" /> 
     <p>Follow us on Twitter</p> 
     </a> 
     <br class="clear-both" /> 
    </div> 
    <div id="googleplus"> 
     <a href="#"> 
     <img src="icon.png" alt="Google+ icon" /> 
     <p>+1 us on Google+</p> 
     </a> 
     <br class="clear-both" /> 
    </div> 
    <div id="usergroup"> 
     <a href="#"> 
     <img src="icon.png" alt="Wordpress icon" /> 
     <p>Read our User Group</p> 
     </a> 
     <br class="clear-both" /> 
    </div> 
</aside> 

雖然我的CSS是：

.clear-both { 
    clear: both; 
} 
#social-bar { 
    float: left; 
    position: absolute; 
    z-index: 1; 
} 
#social-bar > div { 
    position: relative; 
    margin-bottom: 0.3em; 
} 
#social-bar a { 
    float: left; 
    width: 32px; 
    height: 32px; 
    text-decoration: none; 
    overflow: hidden; 
    background-color: #333333; 
    -webkit-border-radius: 16px; 
    -moz-border-radius: 16px; 
    border-radius: 16px; 
    -webkit-transition: width 0.3s; 
    -moz-transition: width 0.3s; 
    -o-transition: width 0.3s; 
    transition: width 0.3s; 
} 
#social-bar a:hover, #social-bar a:focus { 
    width: 100%; 
} 
#social-bar img { 
    vertical-align: middle; 
    float: left; 
    padding-right: 0.2em; 
} 
#social-bar p { 
    float: right; 
    line-height: 32px; 
    font-size: 0.6em; 
    color: #FFFFFF; 
    margin: 0em; 
    padding-right: 1em; 
} 

此外，你可以看到問題在看我創建的jsfiddle：

http://jsfiddle.net/mt7ny/

Answer 1

放在懸停你的CSS動畫，並刪除他們在正常的風格。

#social-bar a:hover, #social-bar a:focus { 
    width: 100%; 
    -webkit-transition: width 0.3s; 
    -moz-transition: width 0.3s; 
    -o-transition: width 0.3s; 
    transition: width 0.3s; 
} 

http://jsfiddle.net/mt7ny/3/

基本上它仍試圖計算的東西寬度，而它的收縮標籤和擴大等。除非有固定的寬度設置，否則它不會那麼快。

Answer 2

最簡單的解決方案是改變你不錯的思維方式

#social-bar a:hover, #social-bar a:focus { 
    width: 100%; 
} 

通過

#social-bar a:hover, #social-bar a:focus { 
    width: 135px; 
} 

問題就解決了，也許不是很好，因爲它是:)