旋转后文本不在同一位置

申请后transform: rotate(90deg);文本与正常位置略有偏移。打开这个Firefox: http://jsfiddle.net/42y89/ http://jsfiddle.net/42y89/。正如您所看到的，文本在旋转后看起来移动了 1px，这在本例中产生了很大的差异。您可以将鼠标悬停在这些框上以查看这是如何发生的。不过在 Chrome 上看起来还不错。

似乎与字体大小/行高/抗锯齿有关？我不知道...有人有什么想法吗？

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