为什么我的关闭按钮会在某些浏览器中抖动？

Question

请在 - http://jsfiddle.net/cYGzC/

结帐演示

这个想法是，在悬停时，十字架（'×'）将围绕其中心转动，这将在悬停时产生良好的旋转运动。问题是，为了正常工作，×的中心和圆的中心必须重合。

.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/