2

应用后transform: rotate(90deg);,文本从其正常位置略微偏移。在Firefox中打开它: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);
}
4

0 回答 0