-moz-переход название и асимметрия перемещения текста

Question

Я добавил -moz-transition:all 0.2s ease-in на зависании. Но в заголовке и тексте FireFox асимметрично перемещаются.

Пример: http://jsfiddle.net/wkcpL/1/

Проблема в font-family. Когда я удаляю font-family:Arial; от body или изменил код Arial на Verdana, код атрибута начинает работать правильно.

Почему это работает для Verdana, но не работает для Arial?

Answer 1

Ну, я не могу комментировать, где работает Вердана, но не Arial, но я думаю, что это связано с использованием margin для вашего перехода. Сделайте снимок с transition:transform(-1px, -1px);.

Вот ваша скрипка с изменениями: http://jsfiddle.net/rgthree/jKHyu/

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