Javascript在Mac和PC上的行为有所不同? 我知道它不应该

我已经创build了一个分页脚本,需要一长段文本并将其分解成页面。 首先将文本加载到ID为#page的div中。 然后,脚本测量#页面的高度,并计算应该分成多less个页面,以便与class .detailsholder合并到div中。

div .detailsholder被清除,并且内部添加适当数量的页面div。 (实际上每个页面里面都有#page的全部文本,但是上边距设置不当,高度固定,溢出设置为隐藏,所以只显示适量。

除此之外,它的效果非常好:当Mac上的Safari和Firefox工作正常时,Windows上的IE和Firefox会添加一个额外的页面。 由于创build页面的方式,如上面括号中所述,最后一页显示为空白 – 文本移动得太远而不能显示在页面“窗口”中。

这是代码。 我正在使用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>'); } 

}

谢谢!

Solutions Collecting From Web of "Javascript在Mac和PC上的行为有所不同? 我知道它不应该"

我在算法中看到一个问题。 Math.round应该是Math.floor为了给正确的页数。 为了明白为什么,假设descHeight是400.那么你将只需要2页的高度210每个,但Math.round(400/210)+ 1 == 3。难道是这个问题的组合平台之间不同的标准字体大小(这可能会影响到高度和触发问题)是您观察到的行为的原因?

你是否尝试过使用不同分辨率/字体设置的类似platformed计算机?

我认为这个问题可能有更多的显示设置和你的Javascript的CSS部分,然后平台的差异。 我的CSS不是很好,但你可能想避免px,并尝试使用%。

以下可能有助于您的诊断:

  • http://browsersize.com/
  • Firebug (适用于Firefox)
  • 开发工具栏 (IE)
  • Web Inspector (对于Safari来说,没有亲自尝试过这个)

添加一些警报,看看如何计算出来。 如果你在不同的浏览器中得到不同的结果,那么你将不得不作出调整来处理差异

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