Firefox錯誤或錯誤的JS

的HTML：

<div id="navigation"> 
<ul> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
</ul>   
</div>

簡單的CSS，是想說明這個問題：

* { margin: 0; padding: 0; } 
.shell { width: 960px; margin: 0 auto; } 

#navigation { background: red; height: 18px; } 
#navigation ul { float: left; display: inline; } 
#navigation ul li { float: left; display: inline; } 
#navigation ul li a { float: left; display: inline; font-size: 14px; line-height: 18px; color:#000; } 
#navigation ul li a:hover { background:blue; }

而且JS（使用jQuery）

var padWidthModule = ($('#navigation').width() - $('#navigation ul').width())%$('#navigation ul li').length, 
padWidthParse = parseInt(($('#navigation').width() - $('#navigation ul').width())/$('#navigation ul li').length), 
padHalfWidthModule = padWidthParse%2, 
padHalfWidthParse = parseInt(padWidthParse/2), 
module = (padWidthModule + padHalfWidthModule)%2; 
moduleParse = parseInt((padWidthModule + padHalfWidthModule)/2); 
if (padHalfWidthModule==0) { 
    $('#navigation ul li a').css({ 
     'paddingLeft': padHalfWidthParse, 
     'paddingRight': padHalfWidthParse 
    }) 
}else{ 
    $('#navigation ul li a').css({ 
     'paddingLeft': padHalfWidthParse, 
     'paddingRight': padHalfWidthParse+1 
    }) 
} 
if (module == 0) { 
    $('#navigation ul li:last a').css({ 
     'paddingLeft': padHalfWidthParse+moduleParse, 
     'paddingRight': padHalfWidthParse+moduleParse 
    }) 
}else { 
    $('#navigation ul li:last a').css({ 
     'paddingLeft': padHalfWidthParse+moduleParse, 
     'paddingRight': padHalfWidthParse+moduleParse+1 
    }) 
} 
setTimeout(function() { 
    var liSum = 0, 
     pixelDifference = 0; 
    if($('#navigation ul li:first').position().top != $('#navigation ul li:last').position().top){ 
     $('#navigation ul li').each(function(){ 
      liSum += $(this).outerWidth(true); 
     }) 
     pixelDifference = $('#navigation').width()-liSum; 
     console.log(liSum) 
     $('#navigation ul li:last a').css({ 
      'paddingLeft': padHalfWidthParse+moduleParse-pixelDifference 
     }); 
    } 
}, 1);

差不多的代碼應該添加動態地填充導航元素以填充導航寬度，而不用空白。

你問的問題？這個代碼在IE6，IE7.IE8，IE9，Safari，Opera，Chrome上測試並且工作正常，沒有問題......但問題來自Windows 7和MAC下的FireFox（XP下沒有問題）。在Firefox中最後一個元素屬於導航。如果你在JS中看到我只是爲了setTimeout函數而添加的，那麼它的唯一目的就是修復Buggy的FireFox。

但還有更多的，我留下了一個console.log（liSum）計算所有「li」元素的寬度後，JS把它填充到它們，它應該顯示597px（在FireFox下）。所以我們有3px的差異，從最後一個元素減去... 但讓我們停在這裏，這聽起來不可疑嗎？我們有一個寬度爲960px的框，並列出總計爲957px的元素，這些元素似乎無法放入框中...？如果我的數學是正確的957 < 960所以他們應該適應畢竟......但沒了......（你應該注意到，如果問題是元素的寬度比960像素更大的我已經中減去其寬度和導航的寬度，但這種情況並非如此）所以以後。減去你會看到，仍然有最後的導航元素之後的一些空間。（實際上我可以硬編碼，從最後一項減1，看起來更好，但仍然會留下一些空間）

如果setTimeout被刪除，最後一個元素將會下降，但如果我們打開FireBug並且從最後一個元素中移除1px，它將捕捉到導航框，但最後仍會有一點空間。

，如果這是可以解決的任何想法？（哪裏是從哪裏來的問題）

（抱歉，如果我的英語不好）

的jsfiddle：http://jsfiddle.net/utWda/

屏幕：

（壞）火狐Win7的（有時刻設定功能）：http://i.imgbox.com/adoAy24C.jpg

（壞）火狐Win7的（不含時刻設定）：http://i.imgbox.com/ads6Ldvu.jpg

（好）歌劇：http://i.imgbox.com/acqkLzGy.jpg

（好）火狐XP：http://i.imgbox.com/abudcEOp.jpg

來源

2012-11-04 user1673832

每當遇到與HTML，JS，CSS有關的問題，請使用[jsfiddle]（http://jsfiddle.net） – Srinivas

已添加。對不起，我忘了它。 – user1673832

您可以添加好頁面的屏幕截圖和其中一個錯誤嗎？它似乎對我來說很好（FF 16.0.1，FC16） – nico

你的問題大概是jQuery是擰你了。

它這樣做的方式是，jQuery的width()返回寬度四捨五入到最近的像素。但CSS框的實際寬度不一定是整數像素。在你的情況下，說每個鏈接的寬度比整數大0.45px。然後，如果在將它們四捨五入到最接近像素之後的寬度總和比總寬度小3px，那麼所有7個鏈接寬度的總和實際上將是0.15px 大於總寬度的，發現。

要解決此問題，您應該使用getBoundingClientRect（）進行大小計算。並抱怨jQuery開發人員修復jQuery的width() ...

來源

2012-11-05 03:59:37

10x爲答案。 – user1673832

Firefox錯誤或錯誤的JS

回答

相關問題