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

ヘッドセクションで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 に答える