MacとPCでJavascriptの動作が異なりますか？

Question

長いブロックのテキストをページに分割するページ分割スクリプトを作成しました。最初に、テキストは#pageというIDでdivにロードされます。次に、スクリプトは#pageの高さを測定し、div .detailsholderでdivに収まるように分割するページ数を計算します。

div .detailsholderがクリアされ、適切な数のページ区切りが内部に追加されます。 （それぞれ実際には#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

アルゴリズムに1つの問題があります。正しい数のページを与えるためには、Math.roundはMath.floorでなければなりません。理由を調べるには、descHeightが400であると仮定します。次に、高さ210のページが2ページだけ必要ですが、Math.round（400/210）+ 1 == 3でなければなりません。プラットフォーム間で異なる標準フォントサイズ（おそらくdescHeightに影響し、問題を引き起こすでしょう）があなたが観察する動作の理由ですか？

Answer 2

解像度やフォントの設定が異なる同じプラットフォームのコンピュータで試しましたか？

この問題は、表示設定とJavascriptのCSS部分とプラットフォームの違いと関係があると思います。私のCSSは素晴らしいことではありませんが、pxを避けて％を使用することをお勧めします。

次あなたの診断に役立つかもしれない：

（IE用）

• http://browsersize.com/
• Firebug（Firefox用）
• Developer Toolbar
• Web Inspectorが（サファリのために、個人的に試していませんこの1つ）

Answer 3

いくつかのアラートを追加して、計算がどのように出力されているかを確認します。異なるブラウザで異なる結果が得られる場合は、差異を処理するために調整を行う必要があります

Answer 4

スクリプトの最後の行に、2番目の開始タグdiv：それは閉じられていないようです。多分これは問題を引き起こすでしょうか？