0

我有一个如下列表：

<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 也不考虑大小更改并根据先前的大小折叠父级。

我能做些什么？

4

1 回答 1

1

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

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

然后给子元素一个负的“顶部”值，这样它们就会向上移动并且不留空隙。

ul.toshow > li {
    position: relative;
    top: -1px;
}
于 2012-12-17T09:54:32.970 回答