菜单项定位问题

Question

我正在尝试创建一个标题菜单。 请在此处查看我的代码： http://jsfiddle.net/kc2cc/ 。

我的意图是，如果用户单击菜单项（徽标、位置、事件或组），则单击的元素将向下移动 1px，直到单击为止，它会返回到原始位置。 在 Chrome 15 中，一切正常，但在 Firefox 和 IE 中，如果我单击元素，所有元素都会向下移动。

原因是什么？我该如何解决？ 谢谢

Answer 1

我真的不知道为什么，但似乎是 ul#navigation li 的默认值 baseline 导致了问题。将其更改为 middle 或其他任何内容都可以解决该问题。

ul#navigation li {
    border-right: 1px solid #F5F5F5;
    display: inline-block;
    height: 35px;
    vertical-align: middle;
}

Answer 2

设置 vertical-align: top 为

http://jsfiddle.net/kc2cc/13/