0

前几天我尝试通过添加左右填充来调整水平菜单项，使它们按文本加权，而不仅仅是将它们调整为相同的宽度。目标是填充容器的确切空间。（很脏）代码如下：

$(document).ready(function(){
  var mmenuW = $('#navinner').width(); //space to fill
  var mmCount = 0; //number of menu items
  var mmLiW = 0; //current summa width of menu items
  $('#navinner li a').each(function(){
    mmLiW += $(this).outerWidth();
    mmCount++;
  });

  alert(''); //THE NASTY ALERT, see below

  var paddPlus = Math.floor((mmenuW-mmLiW)/(mmCount*2));
  $('#navinner li a').css({'padding-left': paddPlus+'px', 'padding-right': paddPlus+'px'});
  var nmmLiW = 0; // new summa width of items
  $('#navinner li a').each(function(){
    nmmLiW += $(this).outerWidth();
  });

  var mmGap = mmenuW-nmmLiW-1; //remaining gap because of Math.floor
  alert((paddPlus)+'px');
  alert((mmGap+paddPlus)+'px');

  // adding the gap to the last elements right padding
  $('#navinner li a').last().css('padding-right', (mmGap+paddPlus)+'px');
}

奇怪的行为是当第一个警报被注释掉时，脚本工作正常，但是对于警报存在的情况有一些像素不准确。

第一个警报脚本完美运行，警报值：''，'46px'，'58px'

如果没有第一个警报，脚本会留下空白，警报值：''，'46px'，'54px'

浏览器：FF 6.0，JQuery：1.7.1，还没有在线示例。

/////// 编辑 ////////

我发现这是因为计算发生在 $(document).ready 但显然并不意味着所有 css 内容都已加载，包括特殊字体（在这种情况下使用 google webfont）。该函数使用我认为的一些后备字体运行，导致差异。所以问题减少到如何在不使用 $(window).load 的情况下更好地处理字体加载。在格式化菜单之前等待所有图像加载并不那么优雅。

4

0 回答 0