Edge browser menu item hover glitch

时间:2016-10-09 15:59:21

标签: css microsoft-edge

Been battling with this for a few days - finally caving in and asking for help.

I'm experiencing a super weird issue in the Edge browser.

Here's the test site: http://edge22.com/test-edge/

When you hover over the menu items, a 1px line appears below the menu item you hovered. There's no border, text-decoration etc.. If the white header area is made black, the line is black etc..

It's like the height of the menu item is reducing by 1px only on hover: http://screencast.com/t/Lpkow3HF0

Now the weird part. This only happens when the element right before the navigation is a link (the "Test" link). If this link is removed, the glitch disappears.

Now if I wrap the link in a div and give it a small margin, the issue goes away:

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

Does anyone have any idea what's going on? I've stripped all of the CSS down to nothing, and can't pinpoint the problem.

1 个答案:

答案 0 :(得分:1)

我不确定它是否可以解决您的问题(因为它不再可用),但是它解决了我的问题。所以对于其他寻找悬停时出现的Edge伪像的人来说……

我遇到了一个类似的问题,即在某些元素上(而不是在同一页面上使用相同样式的其他元素上)完全完全出现一行。 在我的情况下,它损坏了一部分大小的图像下的菜单栏,在悬停时具有很高的可重复性(即使不再悬停时,损坏仍然存在)。 我发现的最简单的解决方案是:以与背景颜色相同的颜色向父对象添加边框;问题解决了。