html - 回転後にテキストが同じ位置にない

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