Question

我对一个代码有点问题。

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＆lt; 960所以它们应该适合...但是没有...（你应该注意，如果问题是元素的宽度大于960px我会减去它们的宽度和导航的宽度，但事实并非如此）因此，在减法之后，您将看到在最后一个导航元素之后仍有一些空格。（实际上我可以对它进行硬编码并从最后一项中减去1，看起来更好，但仍然会留下一些空间）

如果删除了setTimeout，最后一个元素将会掉落，但是如果我们打开FireBug并从最后一个元素中删除仅1px，它将捕捉到导航框，但最后仍会有一点空间。 / p>

任何想法，如果这是可以修复的？（问题来自哪里）

（对不起，如果我的英语不好）

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

Answer 1

你的问题可能是jQuery让你搞砸了。

它的做法是jQuery的width()返回舍入到最近像素的宽度。但CSS框的实际宽度不必是整数像素。在您的情况下，假设每个链接的宽度比整数大0.45px。然后，如果将它们舍入到最近像素之后的宽度总和比总宽度小3px，则所有7个链接宽度的总和实际上将比总宽度大0.15px 更大正如你所发现的那样会破裂。

要解决此问题，您应该使用getBoundingClientRect（）进行大小计算。并抱怨jQuery开发人员修复jQuery的width() ...

Firefox Bug或错误的JS

1 个答案: