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

请在 http://jsfiddle.net/cYGzC/结帐演示

我们的想法是,在悬停时,十字架(‘×’)将围绕其中心转动,这将在悬停时产生良好的旋转运动.问题是,为了正常工作,×的中心和圆的中心必须重合.

.close_button {
    background-color: #3b3b3b;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    Box-shadow: 0 0 5px rgba(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;
}

除了Windows中的Chrome之外,上述CSS技巧似乎在许多浏览器中都能完成. (Mac Chrome似乎工作正常.)

解决方法

简短的回答是为你的十字架使用一个图像.正如Taras所说,无法保证在每个浏览器中字体的呈现方式完全相同.