在IE8中,Jquery滑出选项卡仍然可见

时间:2013-02-02 17:34:00

标签: javascript jquery internet-explorer-8 tabs tabslideout

我选择了这个不错的代码来在我的网站上放置一个“社交”滑块...

我是一个完全没有Java的白痴,也不太喜欢HTML,但我不明白为什么这对IE8不起作用。Chrome和FF很好但在IE8中标签显示

您可以在此处查看http://www.villaralfa.com/2013test.html

是的我知道我使用了一个编辑器来构建网站和一个旧网站......但它给了我想要的结果(通常)。我可以让标签移动,甚至可以将整个内容放在右侧而不是左侧,但是我无法解决整个标签在IE上始终可见的问题。

抱歉,我试图将代码拆分为不同的行,以便于阅读,但无法解决问题!

代码是

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

<table id="slideleft" style=" overflow:auto; position:fixed; top:10%;">
    <tr class="slideLeftItem" style="position:fixed;left:-320px;z-index:1000;height:100%;">
        <td>
            <img src="https://lh3.googleusercontent.com/-GMJe-Am-U9Q/T4p4bZu7jDI/AAAAAAAAAFs/qQqmMGn-wwg/s800/facebook-vertical.png" style="top:5px; position:absolute; border-left-width:5px; left:318px;"/>
        </td>
        <td class="contentBox" style="border:solid 5px #5370AD; width:300px;height:300px;position:relative;border-radius:5px;background-color:white;">
            <div id="fb-root"></div>
            <script type="text/javascript" >
                (function() {
                    var e = document.createElement('script'); 
                    e.async = true;
                    e.src = document.location.protocol +'//connect.facebook.net/en_US/all.js#xfbml=1';
                    document.getElementById('fb-root').appendChild(e);
                }());
            </script>
            <fb:like-box href="www.facebook.com/VillaRalfa" width="300" show_faces="true" stream="false" header="false"></fb:like-box>
        </td>
    </tr>
    <tr class="slideLeftItem"  style="position:fixed;left:-320px;z-index:1000;height:100%;">
        <td>
            <img src="https://lh3.googleusercontent.com/-9lxEyInmdU4/T4p4bfb7luI/AAAAAAAAAFk/6NvygQsqtcg/s800/twitter-veritcal.png" style="top:100px; position:absolute; border-left-width:5px; left:318px;"/></td><td class="contentBox" style="border:solid 5px #44CCF6; width:300px;height:300px;position:relative;border-radius:5px;background-color:white;">
            <div style="background: #F5FCFE;">
                <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
                <script type="text/javascript" >
                    new TWTR.Widget({
                        version: 2,  
                        type: 'profile',  
                        rpp: 4,  
                        interval: 30000,  
                        width: 'auto',  
                        height: 300,  
                        theme: {
                            shell: {      
                                background: '#44ccf6',      
                                color: '#000000'    
                            },    
                            tweets: {      
                                background: '#ffffff',
                                color: '#000000',      
                                links: '#44ccf6'    
                            }  
                        },
                        features: {    
                            scrollbar: false,    
                            loop: false,    
                            live: false,    
                            behavior: 'all'  
                        }
                    }).render()
                      .setUser('gay_crete')
                      .start();
                </script>
            </div>
        </td>
    </tr>
</table>
<script type="text/javascript">
    jQuery(".slideLeftItem").append('<div style="font-size:12px;font-family: arial;width:300px;text-align:right;"><a rel="dofollow" href="http://techbrij.com/944/add-social-slider-widget-website" style="background-color:#D2C9CA;padding:3px 7px;font-weight:bold;color:#516FA9">Get This Widget</a></div>');
    jQuery("#slideleft tr").hover(function(b){
        var a=jQuery(this);
        jQuery("#slideleft tr").not(a)
                               .hide();
        a.css({
            "z-index":"9999"
        });
        a.stop().animate({
            left:0
        })
    },function(b){
        var a=jQuery(this);
        a.css({
            "z-index":"1000"
        });
        a.stop().animate({
            left:-a.outerWidth()
        });
        jQuery("#slideleft tr").show()
    });
</script>

0 个答案:

没有答案