将鼠标悬停在带有显示的下拉菜单上：表格在 IE 中不起作用

Posted 2023-02-21

【中文标题】将鼠标悬停在带有显示的下拉菜单上：表格在 IE 中不起作用

【英文标题】：hovering over a dropdown menu with display: table doesn't work in IE

【发布时间】：2013-03-08 20:11:31

【问题描述】：

我正在做一个类似于引导程序的下拉菜单。唯一的区别是我的下拉菜单的默认状态是display: table，因为我需要菜单看起来像一个表格。不幸的是，这在 IE10 中不起作用：

http://codepen.io/anon/pen/LfdoB

它在 safari、chrome 和 firefox 中都能正常工作。

在 IE 中发生的情况是第一次悬停有效，但随后的悬停不显示下拉菜单，但我确实看到了框阴影。似乎height: 0，虽然设置height: auto 并没有做任何事情。

【参考方案1】：

我真的不知道为什么 IE 会这样。

无论如何，我让它工作 display:table 永久（即处于正常状态）并隐藏 - 通过可见性显示它：

.dropdown-menu 
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: table;
    visibility: hidden;
    min-width: 100%;
    background-color: white;
    box-shadow: 0 4px 8px 4px rgba(0, 0,0, .15);


:hover > .dropdown-menu 
    visibility: visible; 
    

updated codepen

【讨论】：

半相关问题，如果我使用visibility: hidden，是否保证隐藏时下拉菜单不可点击？

具有可见性的元素：隐藏不会触发鼠标事件。见 [***.com/q/5659563/1926369]。或者至少，他们不应该，很难说这是有道理的:-)

为什么 IE 为什么会成为最流行的短语之一 :-)