一部のブラウザで閉じるボタンが揺らぐのはなぜですか？

Question

デモをチェックしてください - http://jsfiddle.net/cYGzC/

ホバーでは、十字（ '×'）が中心を回って回転し、ホバー上で回転するようになります。問題は、これがうまくいくためには、xの中心と円の中心が一致しなければならないということです。

.close_button { 
    background-color: #3b3b3b; 
    width: 40px; 
    height: 40px; 
    border-radius: 20px; 
    box-shadow: 0 0 5px rgba(150,150,150,0.9); 
    color: #fff; 
    font-size: 40px; 
    line-height: 40px; 
    text-align: center; 
    transition-duration: 2s; 
    -webkit-transition-duration: 2s; 
    -moz-transition-duration: 2s; 
    -o-transition-duration: 2s; 
    cursor: pointer; 
} 

上記のCSSトリッキーは、WindowsのChrome以外の多くのブラウザで機能しているようです。 （Mac Chromeは問題なく動作しているようです）

Answer 1

に良く働くようで短い答えは、あなたの十字のために画像を使用することです。 Taras氏によれば、フォントがすべてのブラウザでまったく同じになるという保証はありません。

Answer 2

これは問題の原因となっているfont-familyのようです。あなたがfont-family:Arial, Helvetica, sans-serif;を作る場合には、Firefoxの

http://jsfiddle.net/cYGzC/1/