INternetエクスプローラで2行に実行されているメニュー

Question

http://berrisford.gumpshen.com/のメニューには、次のjavascriptを使用してメニュー項目の埋め込みを行うメニューがあります。

これは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/

Answer 1

私はFirefoxの10、サファリ（最新）とIE7を比較しました。メニューはSafariでしか見えません。 Firefoxでは、最後のメニュー項目は次の行、最初の項目の下にあります。 IE7では、すべての項目が1行で表示されますが、Z-索引に問題があります。私は、ヘッダ要素に次のCSSを追加した場合、重複は固定です：

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

私はこれがあなたの最初の問題ではありません知っているが、ユーザーの多くは、IE7にそこに存在しているので、私はこのことを検討します。

パディングの問題について。私はパディングのいくつかが二重の値であることを知っています。役立つはず整数にそれらを変更するか、値をフローリング：

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

それとも

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

を全部門でこれを行います。

Answer 2

それらを含有する容器フローティング要素が1つのピクセル小さくしようとする、つまりはこれでいつかトラブルを持っており、新しい行にそれを破ります。

だからvar finalWidth = 939;を試してください。これで解決します。

Answer 3

finalWidthを変更するとあまり効果がないので、コード内の "940"をfinalWidthに変更する必要があります。

はこれを試してみてください。

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