我有一个相当典型的下拉标记,主要区别在于容器是按钮而不是 div,这似乎是 Firefox 中问题的主要原因。该按钮包含一个列表,当我将鼠标悬停在按钮上时,列表显示正常。但是当我开始移动到下拉列表时,按钮上的悬停会停用。如果我使用 DIV 元素而不是 BUTTON,那么它在两种浏览器中都可以正常工作。这是我正在使用的代码(plnkr:plnkr.co)
<!--Using 'button': does not work in Firefox-->
<button class="button">
button text: this doesn't work in Firefox but works in Chrome
<ul>
<li>Item 1</li>
<li>Item 2</li>
...
</ul>
</button>
<!--Switching to 'div': works fine-->
<div class="button">
switching to DIV: this works as expected
<ul>
<li>Item 1</li>
<li>Item 2</li>
...
</ul>
</div>
相关CSS:
.button {
position: relative;
}
.button > ul {
display: none;
position: absolute;
}
.button:hover > ul {
top: 100%;
left: 0;
display: block;
}
如果有人能帮我弄清楚为什么这种行为在 Chrome 和 Firefox 中有所不同,那就太好了。