我的jQuery的導航欄不會出現在IE8中

我一直在尋找一個答案，我無法找到我的困境的答案。問題可能很簡單，但我一直在做一個噩夢。我的jQuery的導航欄不會出現在IE8中

我有一個由jQuery提供支持的導航欄，可以在您懸停並點擊它時更改背景圖片。點擊操作完成後，將顯示淡入淡出以顯示其他圖像，並隱藏一個div並顯示另一個div。

該代碼在Firefox和Chrome中運行得非常好，但愚蠢的IE顯示器只有一個灰色條。當你點擊欄上的某個地方時，div改變了，所以我不知道那裏有什麼問題。

要查看的頁面點擊here

下面的代碼：

  $(document).ready(function() { 
      navigationPrimary(); 
      menuAction(); 

      $("#pagePlan").hide(); 
      $("#pagePortes").hide(); 
      $("#pageAutre").hide(); 

      function menuAction() {    
      $("#menu li.acceuil").click(function(){ 
       $("#main").show(); 
       $("#pagePlan").hide(); 
       $("#pagePortes").hide(); 
       $("#pageAutre").hide(); 
       $("#menu li.acceuil a").css("background-position","0px -100px"); 
       $("#menu li.plan a").css("background-position","-150px 0px"); 
       $("#menu li.portes a").css("background-position","-300px 0px"); 
       $("#menu li.services a").css("background-position","-450px 0px"); 
       $("#header img.estim").show(); 
       return false;      
      }); 


      $("#menu li.plan").click(function(){ 
       $("#main").hide(); 
       $("#pagePlan").show(); 
       $("#pagePortes").hide(); 
       $("#pageAutre").hide(); 
       $("#menu li.acceuil a").css("background-position","0px 0px"); 
       $("#menu li.plan a").css("background-position","-150px -100px");  
       $("#menu li.portes a").css("background-position","-300px 0px"); 
       $("#menu li.services a").css("background-position","-450px 0px"); 
       $("#header img.estim").hide(); 
       return false;     
      }); 

      $("#menu li.portes").click(function(){ 
       $("#main").hide(); 
       $("#pagePlan").hide(); 
       $("#pagePortes").show(); 
       $("#pageAutre").hide(); 
       $("#menu li.acceuil a").css("background-position","0px 0px"); 
       $("#menu li.plan a").css("background-position","-150px 0px"); 
       $("#menu li.portes a").css("background-position","-300px -100px"); 
       $("#menu li.services a").css("background-position","-450px 0px"); 
       $("#header img.estim").hide();  
       return false;     
      }); 

      $("#menu li.services").click(function(){ 
       $("#main").hide(); 
       $("#pagePlan").hide(); 
       $("#pagePortes").hide(); 
       $("#pageAutre").show(); 
       $("#menu li.acceuil a").css("background-position","0px 0px"); 
       $("#menu li.plan a").css("background-position","-150px 0px"); 
       $("#menu li.portes a").css("background-position","-300px 0px"); 
       $("#menu li.services a").css("background-position","-450px -100px"); 
       $("#header img.estim").hide(); 
       return false;      
      }); 
      } 


     }); 

     function navigationPrimary() { 
     $('#menu li').removeClass('hover'); 
     $('#menu li a') 
      .css({ opacity: 1.0 }) 
      .mouseover(function() { 
       $(this).stop().animate({opacity: 0.0}, 300); 
       }) 
      .mouseout(function() { 
       $(this).stop().animate({opacity: 1.0}, 1000); 
      }); 
     }

預先感謝您

來源

2010-12-15 Max

您是否收到錯誤？此外，你可以檢查你的文章是否正確...看起來代碼丟失或沒有正確顯示。 – matthewpavkov 2010-12-15 05:07:50

@matthewpavkov我修正了代碼顯示謝謝你指出。對於IE中的錯誤。我沒有從瀏覽器中得到任何錯誤，只是沒有顯示jquery。感謝您花時間看我的問題。 – Max 2010-12-16 02:18:45

它看起來像李時珍在您的UL都是浮動的，但你是不是清除浮動。嘗試添加這對你的CSS，然後添加類clearfix您#menu UL

/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */ 
.clearfix:before, .clearfix:after { 
    content: "\0020"; display: block; height: 0; visibility: hidden; 
} 

.clearfix:after { clear: both; } 
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ 
.clearfix { zoom: 1; }

html5boilerplate的Clearfix讚美在IE

來源

2010-12-15 05:46:55 Matrym

感謝您的回答，但可悲的是它並沒有解決我的問題:( – Max 2010-12-16 03:58:34

我的jQuery的導航欄不會出現在IE8中

回答

相關問題