Question

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

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

它的效果很好，除此之外：虽然Mac上的Safari和Firefox运行良好，但Windows上的IE和Firefox增加了额外的页面。由于页面的创建方式，如上面括号中所述，最后一页显示为空白 - 文本移动太远，无法显示在页面“窗口”中。

这是代码。正如你所看到的，我正在使用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

添加一些提醒以查看计算结果如何。如果您在不同的浏览器中获得不同的结果，则必须进行调整以处理差异

Answer 3

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

Answer 4

我在算法中看到一个问题。 Math.round应为Math.floor，以便提供正确的页数。为了看到原因，假设descHeight是400.那么你每个只需要2页高度210，但Math.round（400/210）+ 1 == 3.这可能是这个问题的组合在一起平台之间不同的标准字体大小（可能会影响descHeight并触发问题）是你观察到的行为的原因吗？

Javascript在Mac和PC上表现不同？我知道不应该

4 个答案: