残りの幅をすべての div に再分配する次のコードがあります。
var menuItems = $('.picNav .overlay .item, .picNav .overlay .home');
var parentWidth = 980;
var totalItemWidth = 0;
var restWidth;
var moduloWidth;
var resultWidth;
menuItems.css({ width: "" });
for (var i = 0; i < menuItems.length; i++)
{
totalItemWidth += menuItems[i].offsetWidth;
}
restWidth = parentWidth - totalItemWidth;
moduloWidth = restWidth % menuItems.length;
restWidth -= moduloWidth;
resultWidth = restWidth / menuItems.length;
for (i = 0; i < menuItems.length; i++)
{
$(menuItems[i]).width($(menuItems[i]).width() + resultWidth);
}
$(menuItems[0]).width($(menuItems[0]).width() + moduloWidth);
このスニペットは、現在のすべてのブラウザで期待どおりに機能します。ただし、IE9でいくつかのテストを行った後、最後の要素が次の行にドロップされることがあるという問題がありました。JavaScript をデバッグすると、totalItemWidth の正しい量 (私の場合: 717px) が計算されます。デバッグしない (または totalItemWidth を計算する部分をスキップする) と、658px になることがあります。
それが読み込みの問題なのか、それとも何か他のことが起こっているのかはわかりません。
誰かが私に少しの洞察を与えることができれば幸いです。
乾杯カルロ