JavaScript 在 Mac 和 PC 上的行为不同？我知道不应该

Question

我创建了一个分页脚本，它需要很长的文本块并将其分成页面。首先，将文本加载到 id 为 #page 的 div 中。然后脚本测量#page 的高度并计算它应该分成多少页以适应div 类.detailsholder。

div .detailsholder 被清空，并在里面添加适当数量的页面 div。 （每一个其实里面都有#page的整个文本，但是上边距设置为负数，高度固定，溢出设置为隐藏，所以只出现适量。）

而且它运行良好，除了这一点：Mac 上的 Safari 和 Firefox 运行良好，而 Windows 上的 IE 和 Firefox 添加了一个额外的页面。由于页面的创建方式（如上面括号中所述），最后一页显示为空白 - 文本向上移动太远而无法显示在页面 window 中。

这是代码。如您所见，我正在使用 jQuery。

var descHeight = $('#page').outerHeight();
if (descHeight > 250 ) {
   var numberOfPages = Math.round(descHeight/210)+1; //Figure out how many pages
   var artistText = $('#page').html();               //Grab the text into a variable
   $('.detailsholder').empty();                      //Empty the container so we can fill
                                                     //it with pages
   for (i=0;i<=numberOfPages-1;i++) {                //Each page has the entire text
                                                     //content, but is shifted up and
      var shiftUp = 0-(210 * i);                     //cut off at the bottom.
      $('.detailsholder').append('<div id="page' + (i+1) + '" class="page" style="height:225px;"><div style="border:dotted 1px red;margin-top:' + shiftUp + 'px"' + artistText + '</div>');
   }
}

谢谢！

Answer 1

您是否在具有不同分辨率/字体设置的类似平台计算机上尝试过？

我认为这个问题可能更多地与显示设置和 Javascript 的 CSS 部分有关，然后是平台差异。我的 CSS 不是很好，但您可能希望避免使用 px 并尝试使用 % 代替。

以下内容可能有助于您的诊断：

• http://browsersize.com/
• Firebug（对于 Firefox）
• Developer Toolbar（适用于 IE）
• Web Inspector（Safari，没亲自试过这个）

Answer 2

我在算法中发现了一个问题。 Math.round 应该是 Math.floor 以便给出正确的页数。为了了解为什么假设descHeight 是400。那么你只需要两页高度210，但Math.round(400/210) + 1 == 3。难道这个问题与平台之间不同的标准字体大小（这可能会影响descHeight并触发问题）是您观察到的行为的原因吗？

Answer 3

添加一些警报以查看计算结果。如果您在不同的浏览器中得到不同的结果，那么您将不得不进行调整以处理差异

Answer 4

在脚本的最后一行，第二个开始的 div 标签：它似乎没有关闭。也许这会导致问题？