菜单项定位问题

Question

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

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

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

Answer 1

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

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

Answer 2

为vertical-align: top设置<li> http://jsfiddle.net/kc2cc/13/