1 つのコードに少し問題があります。
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 を修正することだけです。
しかし、もっとあります.JSがパディングを配置した後、すべての「li」要素の幅を計算するconsole.log(liSum)を残しました.597px(FireFoxの下)が表示されます。つまり、最後の要素から差し引かれた 3 ピクセルの差があります... しかし、ここでやめましょう。幅 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
(良い) Opera: http://i.imgbox.com/acqkLzGy.jpg
(良い) FireFox XP: http://i.imgbox.com/abudcEOp.jpg
