菜单下的jQuery滑动按钮在FF中移动所有其他按钮

Question

我一直在菜单上工作，并在Chrome/Safari中完美工作。 URL是 http://www.penuli.nl/aboutvanwow.html.

但是FF给我带来了工具提示的困难。每当我悬停在按钮上时，所有其他按钮（在列表中的divs中）都会跳到父母的底部，即列表项目。我不明白他们为什么这样做，因为所有物品都足够大，可以彼此相处，而无需“推动”其他物品。

在评论框中是我关于菜单的插图的链接（我没有足够的声誉点发布图像）

使它可能更加复杂的原因（但它与之无关），是在页面中动画的按钮。这意味着他们的位置是相对的。

我找到了一个解决方案，感谢您的stackoverflow，阅读另一个问题，但这意味着我必须更改动画：溢出：隐藏在我将其应用于列表项目时确实有效，但是单击后我有一个动画事件使所有按钮都“下降”页面。当我当然可以取消该动画时，没有任何作用，更重要的是，网站的工作原理，然后或多或少地是一个动画，但是对两者都有效的解决方案将非常好！提前致谢。

---

某些CSS（对于开始和结束动画而没有一些行）：

#wrap ol#menu{
margin-left: 0;
padding-left: 0;
width: 1000px;
height: 160px;
}

#wrap ol#menu li{
display: inline-block;
list-style-type: none;
width: 138px;
height: 160px;
background-image: url("/images/backgroundbutton.png");
background-repeat:no-repeat;
background-color: white;
cursor: pointer;
position: relative;
z-index: 0;
}

#wrap ol#menu li .button{
width: 138px;
height: 82px;
z-index: 2;
position: relative;
background-repeat:no-repeat;
}

ol#menu li:nth-child(7n+1) .button {
background-image: url("/images/button-1.png");
}

#wrap ol#menu li .tooltip{
background-image: url("/images/tooltip.png");
position: relative;
background-repeat:no-repeat;
top: -30px;
width: 138px;
height: 130px;
z-index: 1;
display: none;
}

Answer 1

使列表浮动可以解决您的问题。

在你的 #wrap ol#menu li 规则，交换：

display: inline-block;

和：

float:left;

（保持显示：内联块不是问题，但是由于元素在漂浮，因此不再需要它）

Answer 2

哇，那 是 很奇怪。也许将您的列表项目更改为Divs集合？