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

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/