Css 悬停零高度元素：浏览器错误？

在处理用户悬停在父菜单项上时（取消）折叠的子菜单时，我遇到了以下问题。考虑下面的标记（以下或ON）。< /P>

ul{
最大高度：0；
溢出：隐藏；
利润率：10px；
填充：0；
边框：10px实心#bada55；
列表样式类型：无；
过渡：边框颜色；
}
悬停{
最大高度：100px；
边框颜色：#de2d26；
}
ul>li{
填充：10px；
指针事件：自动；
}
.无知{
指针事件：无；
}
.抵消{
位置：相对；/*这是罪魁祸首*/
}

我不知道你的指针。
如果你看到我，一定是出了问题


我不是。让我停下来


我应该不知道你的指针。
如果你看到我，一定是出了问题

在所有浏览器上，悬停事件气泡的方式都是相同的，这一点已通过验证

ul{
最大高度：0；
/*溢出：隐藏*/
利润率：10px；
填充：0；
边框：10px实心#bada55；
列表样式类型：无；
过渡：边框颜色；
}
悬停{
最大高度：100px；
边框颜色：#de2d26；
}
ul>li{
填充：10px；
指针事件：自动；
位置：相对位置；
顶部：100px；
背景：黄色；
}
.无知{
指针事件：无；
}
.抵消{
位置：相对位置；
}

让我停下来！测试：在浏览器之间悬停

对此我没有官方解释，但我知道这与块格式上下文有关。我也很有信心，如果他对BFCs有透彻的了解（我有时怀疑他首先编写了规范），他将能够提供准确的技术解释，如果他希望这样做的话

简言之，了解源就是了解修复（已测试并有效）：当需要在父级上设置

位置：相对时，也要在子级上设置
位置：相对
：

/**/
.抵消{
位置：相对；/*这是罪魁祸首*/
}
.偏移量>*{
位置：相对；/*这是修复*/
}


ul{
最大高度：0；
溢出：隐藏；
利润率：10px；
填充：0；
边框：10px实心#bada55；
列表样式类型：无；
过渡：边框颜色；
}
悬停{
最大高度：100px；
边框颜色：#de2d26；
}
ul>li{
填充：10px；
指针事件：自动；
}
.无知{
指针事件：无；
}
.抵消{
位置：相对；/*这是罪魁祸首*/
}
.偏移量>*{
位置：相对；/*这是修复*/
}

我不知道你的指针。
如果你看到我，一定是出了问题


我不是。让我停下来


我应该不知道你的指针。
如果你看到我，一定是出了问题
如果从子li中删除指针事件，它应该可以正常工作：简单地将元素相对单独地定位似乎可以触发它，无论偏移量是分数、整数还是零（或者自动，无论如何计算为零）。“我相信，当元素的边框悬停时，它是悬停的，但我在选择器3级规范中找不到这一点。”元素的边框被认为是元素框的一部分，这在所有CSS中都是如此。因此，一般的说法是：“当光标（鼠标指针）移动时，可视用户代理可以应用这个伪类。”将鼠标悬停在元素生成的框上。“@Pete，当然可以，但是当项目悬停时（当列表通过其他方式展开时），鼠标悬停效果不适用）@BoltClock你是对的！这让它更有趣了…我起初怀疑有一些舍入错误，但那不可能是真的。谢谢你在方框上的解释：-）非常感谢你的回答！你对矩形颜色的评论让我发笑。的确，你的修复看起来很好，但它让我很失望我绞尽脑汁想知道为什么。我会进一步调查，然后回到这个答案：-）你的解决方案很好，所以我很想奖励你一些东西，但最后另一个答案对我帮助更大。至少你得到了我的支持。我认为检查员显示的内容是准确的，因为孩子就在那里，只是因为
结束而没有显示出来flow:hidden
。我还认为末尾的MDN引用和您在下面的解释不准确，因为只能在“零高度”内容上进行悬停“是父母的，不是到处都是。不过，你的回答帮助我测试和发现了一些东西。谢谢！非常感谢，这给了我进一步的调查。此外，你的修复工作完美！我还不完全理解块格式上下文是如何导致子项上的
position:relative
成为一个补丁的。如果我正确阅读规范，这将使它为每个孩子创建一个新的BFC，从而在某种程度上影响Chrome在悬停时的计算方式？@Justastudent，我的理解是，当为孩子创建BFC时，这个BFC是正确计算的（导致高度为0）因此，它将不再在父级的BFC（包括父级边框）内接收单击。我不是100%确定，所以我没有在答案中包括我的解释。但我确信这是可行的。因此，我的答案是：嗯。我所有的列表都有
溢出：隐藏
，因此形成了一个BFC，正如规范中的“带有“溢出”而不是“可见”的块框。因此，设置
位置：相对
不会改变任何东西，对吗？但我的假设肯定有问题：如果将
overflow
设置为visible以外的任何值为一个孩子创建了一个新的BFC，那么在一个孩子身上设置
overflow:hidden
也会得到同样的结果（并且不会影响其他任何东西，因为他们没有设置的高度）。然而，这并不意味着什么