Text not in same position after rotating

问题

After applying transform: rotate(90deg); the text is slightly shifted from it's normal position. Open this in Firefox: http://jsfiddle.net/42y89/. As you can see, the text appears shifted by 1px after it's rotated, which makes a big difference in this case. You can hover the boxes to see how this happens. On Chrome however it looks fine.

It seems related to the font-size / line-height / anti-aliasing? I don't know... does anyone have any ideas?

<div></div>


div { 
    width: 100px;
    height: 100px;
    margin: 25px;
    font: 60px/44px Arial, sans-serif;
    color: white;
    background: blue;
    text-align: center;
}

div + div {
    -webkit-transform: rotate(90deg);
    -moz-transform:    rotate(90deg);
    transform:         rotate(90deg);
}

来源：https://stackoverflow.com/questions/19353043/text-not-in-same-position-after-rotating