旋转后文本不在同一位置

Question

应用transform: rotate(90deg);后，文字略微偏离其正常位置。在 Firefox ：http://jsfiddle.net/42y89/中打开此内容。正如您所看到的，文本在旋转后显示为1px，这在这种情况下会产生很大的不同。您可以将鼠标悬停在框中以查看这是如何发生的。在Chrome上，它看起来很好。

它似乎与font-size / line-height / anti-aliasing有关？我不知道......有没有人有任何想法？

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