css - -moz-transition 标题和文字移动不对称

Question

我在悬停时添加了 -moz-transition:all 0.2s ease-in。但在 FireFox 中标题和文本移动不对称。

样本:http://jsfiddle.net/wkcpL/1/

font-family 中的问题。当我从 body 中删除 font-family:Arial; 或将 Arial 更改为 Verdana 属性时，代码开始正常工作.

为什么它适用于 Verdana 但不适用于 Arial？

Answer 1

好吧，我无法评论 Verdana 的工作原理而不是 Arial 的工作原理，但我认为这与使用 margin 进行过渡有关。使用 transition:transform(-1px, -1px); 尝试一下。

这是您对更改的 fiddle :http://jsfiddle.net/rgthree/jKHyu/

#content .block:hover{
    /* ... */
    -moz-transform:translate(-1px,-1px);
    -webkit-transform:translate(-1px,-1px);
    transform:translate(-1px,-1px);
}​