*-transform:rotate在Firefox中工作但不在chrome中工作

Question

CSS看起来如下:

.rotate
{
    -webkit-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    -ms-transition: all .5s ease-in-out;
}
.rotate:hover
{
    -webkit-transform: rotate(90deg) scale(1); 
    -moz-transform: rotate(90deg) scale(1); 
    -o-transform: rotate(90deg) scale(1); 
    -ms-transform: rotate(90deg) scale(1); 
}

将鼠标悬停在一个<span class="rotate">将在Firefox中旋转元素但不旋转铬.
演示:http://jsfiddle.net/BuHGQ/(将鼠标悬停在箭头上方)

可以做些什么才能在Chrome中运行？

Answer 1

试试这个:

.rotate { display: inline-block; }

http://jsfiddle.net/y7nfD/1/