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: 
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.
It looks like the `font-family` It causing part of the issue. If you make the `font-family:Arial, Helvetica, sans-serif;` it seems to work better in firefox

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