我对一个代码有一点问题。
的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 函数，那么它的唯一目的就是修复有缺陷的 FireFox。
但是还有更多，我留下了一个 console.log(liSum) 计算所有“li”元素的宽度，在 JS 将其填充到它们之后，它应该显示 597px（在 FireFox 下）。所以我们从最后一个元素中减去了 3px 的差异......但是让我们停在这里，这听起来不是很可疑吗？我们有一个宽度为 960px 的盒子，以及总和为 957px 的列表元素，谁似乎无法放入盒子中......？如果我的数学是正确的 957<960 所以它们毕竟应该适合......但是不......（你应该注意到，如果问题是元素的宽度大于 960px 我会减去它们的宽度和导航的宽度，但事实并非如此）所以在减法之后你会看到最后一个导航元素之后还有一些空间。（实际上我可以对其进行硬编码并从最后一项中减去 1，
如果 setTimeout 被移除，最后一个元素会掉落，但是如果我们打开 FireBug 并从最后一个元素中移除 1px，它会捕捉到导航框，但最后仍然会有一点空间。
有什么想法可以解决吗？（问题出在哪里）
（对不起，如果我的英语不好）
jsfiddle：http: //jsfiddle.net/utWda/
屏幕：
（坏）FireFox Win7（带setTime功能）：http: //i.imgbox.com/adoAy24C.jpg
（坏）FireFox Win7（没有 setTime）：http: //i.imgbox.com/ads6Ldvu.jpg
（好）歌剧：http: //i.imgbox.com/acqkLzGy.jpg
（好）FireFox XP：http: //i.imgbox.com/abudcEOp.jpg
