INternet Explorer中運行成2行的菜單

我有一個菜單omn http://berrisford.gumpshen.com/，它使用下面的javascript來計算菜單項的填充。INternet Explorer中運行成2行的菜單

這在FIrefox中正常工作，但在IE中菜單項變得太長，最後一個菜單項溢出到新行。任何人都可以幫忙嗎？

var finalWidth = 940; 
var totWidth = 0; 

var lis = $("header ul.lv1 > li").each(function() { 
    totWidth += $(this).width(); 
}); 

var diff = finalWidth - totWidth; 
var diffPer = diff/lis.length; 

if (diff > 0) { 
    $("header ul.lv1 > li a").each(function() { 
     $(this).css('padding-right', diffPer/2); 
     $(this).css('padding-left', diffPer/2); 
    }); 

    var totWidth2 = 0; 
    var lis2 = $("header ul.lv1 > li").each(function() { 
     totWidth2 += $(this).width(); 
    }); 



    if ($.browser.msie) { 
     var version = parseInt($.browser.version, 10); 

     if (version < 9) { 
      $("header ul.lv1 > li a").last().css('padding-right', (940 - totWidth2) - 20); 
      var lastItemPaddding = (Math.floor(diffPer/2) + (940 - totWidth2)); 
      $("header ul.lv1:last-child li:last-child a").css('padding-right', lastItemPaddding); 
     } 
    } 
    else { 
     var version = parseInt(detectBrowserVersion(), 10); 

     if (version == 14) { 

      $("header ul.lv1 > li a").last().css('padding-right', (940 - totWidth2) - 20); 
      var lastItemPaddding = (Math.floor(diffPer/2) + (940 - totWidth2)); 
      $("header ul.lv1:last-child li:last-child a").css('padding-right', lastItemPaddding); 
     } 
    } 
}

http://berrisford.gumpshen.com/

來源

2012-03-03 Burt

哪個版本的Internet Explorer？ – 2012-03-03 14:29:52

此外，請檢查網站是否在IE8中損壞網頁錯誤詳情用戶代理：Mozilla/4.0（compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; EasyBits GO v1.0; GameXN GO v1.0 ; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3） Timestamp：Sat，3 Mar 2012 14:35:41 UTC 消息：對象不支持此屬性或方法行：501 字符：13 代碼：0 URI：http://berrisford.gumpshen.com/ – Abhidev 2012-03-03 14:35:38

我只是相比10火狐，Safari瀏覽器（最新）和IE7。該菜單在Safari中看起來不錯。在Firefox中，最後一個菜單項位於第一行下方的下一行。在IE7中，所有項目都在同一行上，但是z-index有問題。如果我添加以下CSS的頭元素，重疊是固定的：

header { 
    position: relative; 
    z-index: 1; 
}

我知道這是不是你最初的問題，但也有很多用戶在那裏上的IE7，所以我會考慮這一點。

關於你的填充問題。我看到一些填充是雙值。他們更改爲整數或地板的值應該有所幫助：

var diffPer = parseInt(diff/lis.length, 10);

或者

var diffPer = Math.floor(diff/lis.length);

與所有部門執行此操作。

來源

2012-03-03 14:40:35

儘量使浮動元素1個像素越小則包含它們的容器，即具有某個時候麻煩這一點，它打破了一個新的生產線。

所以給var finalWidth = 939;一試，這應該解決它。

來源

2012-03-03 14:30:01

更改finalWidth不會做很多工作，您將不得不將代碼中的「940」更改爲finalWidth。

試試這個：

 var diffPer = (diff/lis.length) - 1; //(or -2)

來源

2012-03-03 14:35:24 Stew

INternet Explorer中運行成2行的菜單

回答

相關問題