悬停状态会在谷歌浏览器中移动我的h2

Question

我目前正在开发一个测试页面，以解决一个非常奇怪的错误。

当您将鼠标悬停在名称为链接1，链接2，链接3的导航项目上时，标题下方的h2似乎会上下跳跃。

悬停状态是针对特定的fontawesome类而不是针对h2。

悬停状态样式：

ul.mainNav > li a:hover .fa-caret-square-o-up {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}

“按邮政编码搜索”一词是h2元素。

这是一个小提琴：Demo

我如何解决这个问题，如果有人知道为什么会这样，请告诉我。 ：

Answer 1

您的.wrapper班级有position:relative。

禁用它可以解决问题，但可能会破坏其他布局。

Answer 2

不确定您是否更改了原始帖子中的演示或Paulie_D的答案中的评论，但是当我查看页面时，我看不到元素在移动。我使用的是Google Chrome版本32.0.1700.72 m。你使用的是当前版本吗？