IE9 - 位置：相对;悬停问题 [英] IE9 - Position: relative; hover issue

问题描述

我从IE9得到一些奇怪的悬停行为，似乎是定位一个元素相对于父的结果。这有点难以解释，所以我在这里提供了一个工作示例： http://jsfiddle.net/CVPhW / 2 / 我已经尽可能多地删除了它，但我留下了所有包含 div 在那里，如果他们有某种相关。 p>

尝试将光标悬停在每个按钮的底部，您会看到悬停不会激活，除非您将光标向上移动10个像素。

这是与底部：12px; 样式应用于 #menucontainer ul li a 。如果我删除它，整个部分激活正确，但它的位置不正确。在这个例子中的文本位置是我想要的，但有一个修复的悬停。

有没有人遇到过类似这样的事情？我一直拖着SO和谷歌的答案，但我还没有发现任何远程相似。

解决方案

我舍弃你的例子此处

它似乎在所有浏览器中都有效。我改变了< li> 和< a> 元素

I'm getting some strange hover behaviour from IE9 which seems to be resulting from positioning an element relative to a parent. It's a bit difficult to explain so I've made a working example available here: http://jsfiddle.net/CVPhW/2/ I've stripped it out as much as I can but I left all the containing divs in there in case they were somehow relevant.

Try hovering your cursor over the very bottom of each button and you'll see the hover doesn't activate unless you move the cursor around 10 pixels upwards. It works fine in FF, Chrome and believe it or not, even IE6.

It's something to do with the bottom: 12px; style applied to #menucontainer ul li a. If I remove that, the whole portion activates properly, but it's not positioned correctly. The text position in that example is how I'd like it to be, but with a fix for the hovering.

Has anyone else encountered something like this before? I've been trawling SO and Google for an answer but I haven't found anything remotely similar. I'd be really grateful for some help with this.

解决方案

I forked your example here

it seems to work in all browsers. I changed a couple of styles on the <li> and the <a> elements

这篇关于IE9 - 位置：相对;悬停问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！