div使用jquery.fadeOut在IE中跳转

Question

我有一个多个div，当用户单击页面顶部的选项卡时，我会在这些div之间淡入淡出，我使用jquery.load（）从html文件填充这些div。

我的问题是，当我点击链接顶部淡出当前显示div时，它会向下跳转大约20-30px。这只是第一次发生，在我第一次点击标签后，任何后续标签点击都没有这个问题（因为div已经向下移动了页面）。这一切都有意义吗？

HTML

<div id="menu_nav">
    <a href="#item1" class="menu_nav_a active">Item 1</a>
    <a href="#item2" class="menu_nav_a">Item 2</a>
    <a href="#item3" class="menu_nav_a">Item 3</a>
    <a href="#item4" class="menu_nav_a">Item 4</a>
</div>
<div id="menu_outer">
    <div id="item1" class="menu_container"></div>
    <div id="item2" class="menu_container" style="display:none"></div>
    <div id="item3" class="menu_container" style="display:none"></div>
    <div id="item4" class="menu_container" style="display:none"></div>
</div>

的jQuery

$(function(){
    $('#item1').load('/path/to/item1.html');
    $('#item2').load('/path/to/item2.html');
    $('#item3').load('/path/to/item3.html');
    $('#item4').load('/path/to/item4.html');

    $('.menu_nav_a').click(function() {
        if(!$(this).hasClass('active')) {
            menu=$(this).attr('href');
            $('a.active').removeClass('active');
            $(this).addClass('active');
            $('.menu_container:visible').fadeOut('fast', function() {
                $(menu).fadeIn('fast'); 
            });
        }
        return false;
    });
});

CSS

#menu_outer {margin-top:100px;}

.menu_container {padding-bottom:60px;
    background: #FFFFFF url(/path/to/image.png) no-repeat bottom center;
    display: block;}

.menu_nav_a {width:195px;height:35px;
     display:block;float:left;margin-left:7px;text-indent:-9999px;}