悬停状态在 Google Chrome 中移动我的 h2

Question

我目前正在开发一个测试页面以开发一个 php 函数，并遇到了一个非常奇怪的错误。

当您将鼠标悬停在名称为链接 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

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

Answer 2

你的.wrapper 类有position:relative。

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