Why does my close button wobble in some browsers?

Question

Please checkout the demo at - http://jsfiddle.net/cYGzC/

The idea is that on hover the cross ('×') will turn around its center which will give a nice spinning motion on hover. The problem is, for this to work nicely the center of the × and the circle's center must coincide.

.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;
}

The above CSS trickery seems to do the job in many browsers except Chrome in Windows. (The Mac Chrome seems to work fine.)

Answer 1

The short answer is to use an image for your cross. As Taras says, there is no guarantee that fonts will be rendered exactly the same in every browser.