Question

我有一个如下列表：

<li class="top" style="position: relative;" >
<a href="#">parent</a>
<ul class="toshow" style="display:none;position :absolute; " >
<li><a  href="#">child1</a></li>
<li><a  href="#">child2</a></li>
<li><a  href="#">child3</a></li>
<li><a  href="#">child4</a></li>
</ul>
</li>

然后我有这个jquery代码来处理悬停并显示子项：

$(document).on({mouseenter: function () {$(this).find('.toshow:first').show("slide", { direction: "left" }, 600,function(){});},
    mouseleave: function () {$(this).find('.toshow:first').hide("slide", { direction: "right" }, 400);}
    }, '.top');

它适用于每个浏览器，但IE（我的是IE8）问题是当鼠标光标进入子项之间的空间时。它的行为就像是在父节点之外。

似乎即使更改了父级的大小，IE也不会考虑大小更改并根据之前的大小折叠父级。

我该怎么办？

Answer 1

你可以尝试在head部分设置IE8特定的CSS。

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->

然后给孩子元素一个负面的“顶部”值，这样他们就会向上移动而不留间隙。

ul.toshow > li {
    position: relative;
    top: -1px;
}

悬停在IE中无法正常工作

1 个答案: