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

Question

我创建了一个分页脚本，它接受一大段文本并将其分成几页。首先，将文本加载到 ID 为 #page 的 div 中。然后脚本测量 #page 的高度并计算它应该被分成多少页以适应类 .detailsholder 的 div。

div .detailsholder 清空，在里面添加适当数量的页面div。 (每一个里面其实都有#page的全部文字，只是top margin设置为负，高度固定，overflow设置为hidden，所以只出现适量。)

除此之外，它运行良好:虽然 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，还没有亲自尝试过这个)