Javascript ведет себя по-разному на Mac и ПК? Я знаю, что это не должно

Question

Я создал скрипт разбиения на страницы, который берет длинный блок текста и разбивает его на страницы. Сначала текст загружается в div с id #page. Затем скрипт измеряет высоту #page и вычисляет, сколько страниц нужно разбить, чтобы вписать в div с классом .detailsholder.

Div .detailsholder очищен, и соответствующее количество страниц div добавлено внутрь. (Каждый из них на самом деле содержит весь текст #page внутри, но верхнее поле установлено отрицательно, высота зафиксирована, а переполнение скрыто, поэтому отображается только нужное количество.)

И это прекрасно работает, за исключением этого: хотя Safari и Firefox на Mac работают отлично, IE и Firefox на Windows добавляют дополнительную страницу. Из-за способа создания страниц, как описано выше в скобках, последняя страница выглядит пустой - текст смещен слишком далеко для отображения в «окне» страницы.

Вот код. Как вы видите, я использую 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

Вы пробовали это на аналогичных платформенных компьютерах с разными настройками разрешения / шрифта?

Я думаю, что эта проблема может быть больше связана с настройками отображения и частью CSS вашего Javascript, чем с различиями в платформах. Мой CSS не очень хорош, но вы можете избежать px и попробовать вместо него использовать%.

Следующие сведения могут помочь в диагностике:

• http://browsersize.com/
• Firebug (для Firefox)
• Панель инструментов разработчика (для IE)
• Веб-инспектор (для Safari лично его не пробовал)

Answer 2

Я вижу одну проблему в алгоритме. Math.round должен быть Math.floor, чтобы дать правильное количество страниц. Чтобы понять почему, предположим, что descHeight равен 400. Тогда вам потребуется только 2 страницы высотой 210 ​​каждая, но Math.round (400/210) + 1 == 3. Может ли быть сочетание этой проблемы с Различный стандартный размер шрифта между платформами (который, вероятно, повлияет на descHeight и вызовет проблему), является причиной поведения, которое вы наблюдаете?

Answer 3

В последней строке скрипта второй открывающий тег div: кажется, он не закрыт. Может быть, это вызывает проблемы?

Answer 4

Добавьте несколько предупреждений, чтобы увидеть, как идут расчеты. Если вы получаете разные результаты в разных браузерах, вам придется внести коррективы для обработки различий