css - 使用 :hover causes a flicker in Firefox. 增加链接的字体大小 为什么？

Question

相关问题可在此处找到:http://www.test.terribleobject.com/breathing-stillness/

鼠标悬停在菜单中的第三个链接时会闪烁。我认为这与换行有关，因为这个菜单项太长了，但我现在找不到解决方案。

问题在 Chrome 中并不明显。

我使用的是 Mac 和最新的 FF。

这是CSS:

.menu-item a {
      background: none repeat scroll 0 0 #FEFEFE;
      border: 1px solid #103A02;
      border-radius: 5px 50px 5px 5px;
      font-family: 'IM Fell English SC';
      font-size: 1.3em;
      padding: 0 20px 0 10px;
      text-decoration: none;
      text-transform: lowercase;
    }

    .menu-item a:hover {
      background: #999;
      color: #fefefe;
      padding-left: 15px;
      font-size: 1.4em;
    }

感谢您的帮助。我觉得答案很明显。

Answer 1

菜单项不够大，无法容纳悬停时的文本。

你应该

1. 增加菜单项的宽度
2. 减少 font-size 的变化(比如从 1.4em 到 1.35em)
3. 添加右边的边距

更好的是，您应该放弃 font-size 更改，而只更改 background-color 和文本颜色。

仅供引用，我在 Chrome 中对此进行了测试，它也破坏了布局。