Question

我一直在制作菜单，并在Chrome / Safari中完美运行。网址为http://www.penuli.nl/aboutvanwow.html。

但FF让我很难用工具提示。每次我将鼠标悬停在一个按钮上时，所有其他按钮（列表项中的div）都会跳到其父项列表项的底部。我无法理解为什么他们这样做，因为所有物品都足够大，可以相互配合，而不会“推”其他物品。

在评论框中链接到我对菜单的说明 （我没有足够的声望点来发布图片）

使它可能有点复杂的东西（但它不应该与它有任何关系），是按钮动画到页面。这意味着他们的立场是相对的。

我找到了一个解决方案，感谢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

哇，非常奇怪。也许将列表项更改为div的集合？

Answer 2

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

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

display: inline-block;

使用：

float:left;

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

菜单按钮下方的jQuery slideDown移动FF中的所有其他按钮

2 个答案: