css - 边缘浏览器菜单项悬停故障

Question

与此斗争了几天 - 终于屈服并寻求帮助。

我在 Edge 浏览器中遇到了一个非常奇怪的问题。

这是测试站点:http://edge22.com/test-edge/

当您将鼠标悬停在菜单项上时，您悬停的菜单项下方会出现一条 1px 的线。没有边框，文本装饰等。如果白色标题区域变黑，线条是黑色等。

这就像菜单项的高度仅在悬停时减少了 1px:http://screencast.com/t/Lpkow3HF0

现在是奇怪的部分。只有当导航之前的元素是链接(“测试”链接)时才会发生这种情况。如果删除此链接，故障就会消失。

现在，如果我将链接包装在一个 div 中并给它一个小的边距，问题就会消失:

<div style="margin-bottom:0.1em;"><a href="#">Link</a></div>

有人知道发生了什么事吗？我已将所有 CSS 剥离为零，但无法查明问题所在。

Answer 1

我不确定它是否可以解决您的问题(因为它不再可用)，但它解决了我的问题...所以对于其他寻找悬停时出现的 Edge 人工制品的人...

我有一个有点类似的问题，即在某些元素上完全没有理由地出现一行(而不是在同一页面上使用相同样式的其他元素上)。在我的例子中，它损坏了一个小尺寸图像下的菜单栏，在悬停时具有很好的可重复性(即使不再悬停时，损坏仍然存在)。我找到的最简单的解决方案:以与损坏的背景相同的颜色向父级添加边框；问题解决了。