菜单项定位问题

Question

我试图创建一个标题菜单。 请在这里看到我的代码：http://jsfiddle.net/kc2cc/。

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

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

Answer 1

我真的不知道为什么，但它似乎是默认值baselineul#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/