求助：jQuery的fadeIn在ie6的问题

做了一个tab切换效果，在ie7,FF中都正常，在ie6中就会错位，请各位高手帮忙看看ie7,ff中运行的效果图：
在ie6中的运行效果图：
1、2、鼠标放上去后错位效果

解决方案 »

  1.   

    这是js代码： 
    function changetab(current) {            for (i = 1; i <= 8; i++) {
                    $("#a" + i).fadeTo("fast",1);
                    $("#navcontent" + i).hide();
                }
                
                $("#a" + current).fadeTo("fast", 0);
                $("#navcontent" +current).fadeIn("fast");
                $("#navcontent" + current + "").fadeTo("fast", 0.9);
            }
            function changetabhide(i) {
                $("#navcontent" + i).hide();
                $("#a" + i).fadeTo("fast", 1);
            }html代码：<!--导航 start-->
    <div id="navcontent_container">
    <div id="navcontent1" style="display:none;">
        <div class="navcontent_top"><a href="#" class="tablink" onclick="changetabhide(1);" title="关闭">中心简介</a></div>
        <div class="navcontent_title">南昌瓷板画研究中心简介</div>
        <div class="navcontent_bottom"></div>
    </div>
    <div id="navcontent2" style="display:none;">
        <div class="navcontent_top"><a href="#" class="tablink" onclick="changetabhide(2);" style="margin-left:103px;">新闻动态</a></div>
        <div class="navcontent_title">新闻动态内容</div>
        <div class="navcontent_bottom"></div>
    </div>
    <div id="navcontent3" style="display:none;">
        <div class="navcontent_top"><a href="#" class="tablink" onclick="changetabhide(3);" style="margin-left:103px;">大师介绍</a></div>
        <div class="navcontent_title">大师介绍的内容</div>
        <div class="navcontent_bottom"></div>
    </div>
    <div id="navcontent4" style="display:none;">
        <div class="navcontent_top"><a href="#" class="tablink" onclick="changetabhide(4);" style="margin-left:103px;">作品展示</a></div>
        <div class="navcontent_title">作品展示</div>
        <div class="navcontent_bottom"></div>
    </div>
    <div id="navcontent5" style="display:none;">
        <div class="navcontent_top"><a href="#" class="tablink" onclick="changetabhide(5);" style="margin-left:103px;">教学培训招生</a></div>
        <div class="navcontent_title">教学培训招生</div>
        <div class="navcontent_bottom"></div>
    </div>
    <div id="navcontent6" style="display:none;">
        <div class="navcontent_top"><a href="#" class="tablink" onclick="changetabhide(6);" style="margin-left:103px;">在线留言</a></div>
        <div class="navcontent_title">在线留言</div>
        <div class="navcontent_bottom"></div>
    </div>
    <div id="navcontent7" style="display:none;">
        <div class="navcontent_top"><a href="#" class="tablink" onclick="changetabhide(7);" style="margin-left:103px;">下载专区</a></div>
        <div class="navcontent_title">下载专区</div>
        <div class="navcontent_bottom"></div>
    </div>
    <div id="navcontent8" style="display:none;">
        <div class="navcontent_top"><a href="#" class="tablink" onclick="changetabhide(8);" style="margin-left:183px;">联系方式</a></div>
        <div class="navcontent_title">联系方式</div>
        <div class="navcontent_bottom"></div>
    </div>
    </div>
    <div id="navigate">
    <a href="#" class="tablink" id="a1" onmouseover="changetab(1);">中心简介</a>
    <a href="#" class="tablink" id="a2" onmouseover="changetab(2);">新闻动态</a>
    <a href="#" class="tablink" id="a3" onmouseover="changetab(3);">大师介绍</a>
    <a href="#" class="tablink" id="a4" onmouseover="changetab(4);">作品展示</a>
    <a href="#" class="tablink" id="a5" onmouseover="changetab(5);">教学培训招生</a>
    <a href="#" class="tablink" id="a6" onmouseover="changetab(6);">在线留言</a>
    <a href="#" class="tablink" id="a7" onmouseover="changetab(7);">下载专区</a>
    <a href="#" class="tablink" id="a8" onmouseover="changetab(8);">联系方式</a>
    </div>
    <!--导航 end-->
      

  2.   

    那是css 兼容问题给你一个例子js 无插件选项卡 支持自动改变选中项
      

  3.   

    上面连接 复制错了 http://blog.csdn.net/hch126163/archive/2010/12/02/6050485.aspx
      

  4.   

    hch126163 能否具体说明一下css的兼容问题
      

  5.   

    已解决，确实是css兼容的问题．如以下代码在ie7或ff中显示时是正常，外层的div不会被撑开，但在ie6中是会被撑开的：
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title></title>
    </head>
    <body>    <div style="height: 35px; width: 648px; background-color: #6600CC; position: relative; top: 285px; left: 52px;">
            <div style="float:left;width: 200px; height: 400px; background-color: #00CC00; position: relative; z-index: 1; top: -230px; left: 82px;">
            </div>
        </div>
    </body>
    </html>
    再稍做修改，把内层div的position属性换成absolute，在ie6,ie7和ff 中运行外层的div都不会被撑开了<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title></title>
    </head>
    <body>    <div style="height: 35px; width: 648px; background-color: #6600CC; position: relative; top: 285px; left: 52px;">
            <div style="float:left;width: 200px; height: 400px; background-color: #00CC00; position: absolute; z-index: 1; top: -230px; left: 82px;">
            </div>
        </div>
    </body>
    </html>