Nivo Slider無法在Internet Explorer中加載（7,8,9）

Question

我一直在四處尋找，並嘗試了幾個解決方案，我的問題似乎沒有任何工作。使用IE 7,8和9時，滑塊不會加載到我的網站上。它在Chrome，Firefox和IE10 +上運行良好。還有另一個Jquery腳本和一個Java腳本在同一頁面上，並且工作正常。我可以有任何兼容性問題嗎？

這裏的HTML：

<div id="wrapper"> 
    <div class="slider-wrapper theme-default"> 
     <div id="slider" class="nivoSlider"> 
      <img src="images/slide-1.png" /> 
      <img src="images/slide-2.png" /> 

     </div> 
    </div> 

這裏的腳本：

<script type="text/javascript"> 
    $(function() { 
    $('#slider').nivoSlider({directionNav: false, controlNav: false, controlNavThumbs: false});}); 
</script> 

的CSS：

.nivoSlider { 
    position:absolute; 
    width:100%; 
    height:auto; 
    overflow: hidden; 
} 
.nivoSlider img { 
    position:absolute; 
    top:0px; 
    left:0px; 
    max-width: none; 
} 
.nivo-main-image { 
    display: block !important; 
    position: relative !important; 
    width: 100% !important; 
} 

/* If an image is wrapped in a link */ 
.nivoSlider a.nivo-imageLink { 

    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:100%; 
    border:0; 
    padding:0; 
    margin:0; 
    z-index:6000; 
    display:none; 
    /*patch IE10*/ 
    background:white; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
/* The slices and boxes in the Slider */ 
.nivo-slice { 
    display:block; 
    position:absolute; 
    z-index:5; 
    height:100%; 
    top:0; 
} 
.nivo-box { 
    display:block; 
    position:absolute; 
    z-index:5; 
    overflow:hidden; 
} 
.nivo-box img { display:block; } 

/* Caption styles */ 
.nivo-caption { 
    position:absolute; 
    left:0px; 
    bottom:0px; 
    background:#000; 
    color:#fff; 
    width:100%; 
    z-index:8; 
    padding: 5px 10px; 
    opacity: 0.8; 
    overflow: hidden; 
    display: none; 
    -moz-opacity: 0.8; 
    filter:alpha(opacity=8); 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 
.nivo-caption p { 
    padding:5px; 
    margin:0; 
} 
.nivo-caption a { 
    display:inline !important; 
} 
.nivo-html-caption { 
    display:none; 
} 
/* Direction nav styles (e.g. Next & Prev) */ 
.nivo-directionNav a { 
    position:absolute; 
    top:45%; 
    z-index:9; 
    cursor:pointer; 
} 
.nivo-prevNav { 
    left:0px; 
} 
.nivo-nextNav { 
    right:0px; 
} 
/* Control nav styles (e.g. 1,2,3...) */ 
.nivo-controlNav { 
    text-align:center; 
    padding: 15px 0; 
} 
.nivo-controlNav a { 
    cursor:pointer; 
} 
.nivo-controlNav a.active { 
    font-weight:bold; 
} 

UPDATE：看來，當我行註釋掉下面的另一插件nivo滑塊部分顯示在網站上。

<ul id="menu" > 
<li><a href="javascript:ajaxpage('home.html', 'contentarea');" class="home"></a></li> 
    <li><a href="javascript:ajaxpage('aboutus.html', 'contentarea');" class="aboutus"></a></li> 
    <li><a href="javascript:ajaxpage('newcustomer.html', 'contentarea');" class="newcustomer"></a></li> 
    <li><a href="javascript:ajaxpage('electronicordering.html', 'contentarea');" class="electronicordering"></a></li> 
    <li><a href="javascript:ajaxpage('links.html', 'contentarea');" class="links"></a></li> 
    <li><a href="javascript:ajaxpage('links.html', 'contentarea');" class="forms"></a></li> 
    <li><a href="javascript:ajaxpage('contactus.html', 'contentarea');" class="contactus"></a></li> 
</ul> 

所以這個問題可能與nivo滑塊結合這個其他菜單腳本。

下面是它的代碼：

<script type="text/javascript"> 

    /*********************************************** 
    * Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
    * This notice MUST stay intact for legal use 
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code 
    ***********************************************/ 

    var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no) 
    var loadedobjects="" 
    var rootdomain="http://"+window.location.hostname 
    var bustcacheparameter="" 

    function ajaxpage(url, containerid){ 
     var page_request = false 
     if (window.XMLHttpRequest) // if Mozilla, Safari etc 
     page_request = new XMLHttpRequest() 
     else if (window.ActiveXObject){ // if IE 
      try { 
       page_request = new ActiveXObject("Msxml2.XMLHTTP") 
      } 
      catch (e){ 
       try{ 
        page_request = new ActiveXObject("Microsoft.XMLHTTP") 
       } 
       catch (e){} 
      } 
     } 
     else return false 
     page_request.onreadystatechange=function(){ 
      loadpage(page_request, containerid) 
     } 
     if (bustcachevar) //if bust caching of external page 
     bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() 

     page_request.open('GET', url+bustcacheparameter, true) 
     page_request.send(null) 
    } 

    function loadpage(page_request, containerid){ 
     if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) 
     document.getElementById(containerid).innerHTML=page_request.responseText 
    } 

    function loadobjs(){ 
     if (!document.getElementById) 
     return 
     for (i=0; i<arguments.length; i++){ 
      var file=arguments[i] 
      var fileref="" 
      if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding 
       if (file.indexOf(".js")!=-1){ //If object is a js file 
        fileref=document.createElement('script') 
        fileref.setAttribute("type","text/javascript"); 
        fileref.setAttribute("src", file); 
       } 
       else if (file.indexOf(".css")!=-1){ //If object is a css file 
        fileref=document.createElement("link") 
        fileref.setAttribute("rel", "stylesheet"); 
        fileref.setAttribute("type", "text/css"); 
        fileref.setAttribute("href", file); 
       } 
      } 
      if (fileref!=""){ 
       document.getElementsByTagName("head").item(0).appendChild(fileref) 
       loadedobjects+=file+" " //Remember this object as being already added to page 
      } 
     } 
    } 

</script> 

任何建議或指導，將不勝感激！

Answer 1

嘗試把它的document.ready（）

$(document).ready(function(){ 
    $('#slider').nivoSlider({ 
      directionNav: false, 
      controlNav: false, 
      controlNavThumbs: false 
     }); 
    }); 
});