0

私はsafariで奇妙な振る舞いをしています。私は、jQuery.GridLayoutプラグインとcssをスタイリングに使用しています。

コンテキストによっては、このWebサイトのレイアウトは単純なヘッダーであり、その後にコンテンツが続きます。コンテンツは、javascriptによって配置され、ウィンドウのサイズが変更されるたびに再配置されるブロックのコレクションです（各ブロックはdivです）。

サファリをウェブサイトのURLに誘導すると、すべてのブロックがある程度重なります（50％など）が、ウィンドウを移動する必要がある場合にウィンドウのサイズを変更すると、すべてが自動的に正しい場所に移動し、ページを更新した場合にのみ壊れます。

したがって、ページの読み込みは、何かが登録に失敗したか、ウィンドウのサイズを変更するまで何かが起こらないために、ページを台無しにしているようです。

誰かがサファリの中でそのような行動を経験したように？

これはFirefoxとOperaで完全に機能し、有効なhtml 4.01トランジショナルページであり、cssも検証されます（wc3に関してはそうです）。

コードを公開することは、この種の問題を分類するために非常に貴重であることを私は知っていますが、これは本番プロジェクトであり、私はそれにしない義務があります。

いずれにせよ、探し始めることについてのアドバイスに感謝しますか？

サファリでこの問題をデバッグするにはどうすればよいですか？

ありがとうございました。

4

3 に答える 3

2

リンクされたリソースがロードされる前に、SafariはDomReadyを起動します。CSSで定義された要素のサイズの計算に関するこの競合状態は、通常、JavaScriptの前にCSSリソースをロードすることで回避できます（たとえば、タグがANYタグの前に表示されることを確認します（ブロックされていますが、CSSが非同期でロードされるように変更します）。 ）最悪のシナリオでは、ブロックをの最後の要素に移動し、タグを上に残します。

複数のファイル（ある場合）のCSS連結も推奨されます。

于 2009-09-08T15:44:58.867 に答える
1

ページの実際のコードを投稿できない場合は、特定のコンテンツを使用せずに問題を再現しようとしているときに解決策が見つかる可能性があります。過去に、IRC / SO に投稿する問題を示すページを生成しようとしたときに、私自身の問題のいくつかを解決しました。コンテンツがなくても問題を再現できる場合は、コミュニティに投稿してください。回答がはるかに見つけやすくなります。

私の暗躍する推測は、次の方向につながります。

  • コンテンツ ブロックの 1 つが問題の原因であることがわかる場合があります。
  • 使用している別のライブラリが問題の原因であることがわかる場合があります。
  • すべての準備が整う前に、レイアウトの JavaScript コードが実行されている可能性があります。たとえば、Safari は画像が読み込まれる前にすばやくページを表示します。
  • おそらく、いくつかのグリッド コンテナの正確な幅/高さを指定する必要があります。
于 2009-09-08T09:43:33.180 に答える
0

小さな更新:

(新しい更新は下部にあります)

http://www.howtocreate.co.uk/safaribenchmarks.html

また、次の小さなスクリプトも機能しています。

<script language="JavaScript"> 
 // CREDITS: 
 // Automatic Page Refresher by  Peter Gehrig and Urs Dudli www.24fun.com 
 // Permission given to use the script provided that this notice remains as is. 
  // Additional scripts can be found at http:
  //www.hypergurl.com 
 // Configure refresh interval (in seconds) 
 var refreshinterval=20 
 // Shall the coundown be displayed inside your status bar? Say "yes" or "no" below:
 var displaycountdown="yes" 
 // Do not edit the code below 
 var starttime 
 var nowtime 
 var reloadseconds=0 
 var secondssinceloaded=0 
 function starttime() { starttime=new Date() starttime=starttime.getTime() countdown() 
 } function countdown() { nowtime= new Date() nowtime=nowtime.getTime()      secondssinceloaded=(nowtime-starttime)/1000 
 reloadseconds=Math.round(refreshinterval-secondssinceloaded) if      (refreshinterval>=secondssinceloaded) 
  { var timer=setTimeout("countdown()",1000) if (displaycountdown=="yes") 
  { window.status="Page refreshing in "+reloadseconds+ " seconds" 
  } } else { clearTimeout(timer) window.location.reload(true) } }            window.onload=starttime 
 </script>

更新スクリプトがサファリの問題を解決するのは奇妙だと思いますが、ページを手動で更新すると、ページの大混乱が発生します...

########UPDATE##########

さて、ようやくこれに取り組む時間ができました。いくつか読んだ後、かなり明白なことが頭に浮かびました。コンテンツをロードしてからフォーマットし</body>ます</html>。

ページが最初に読み込まれたときに適切に配置されていなくても、コンテンツを垣間見ることができるため、完璧ではありません.

読み込みから数ミリ秒経過した後、もう一度 js を呼び出してみてください。

私はこれがスレッドの少し上に提案されたことを知っています。手を汚すのに時間が必要だっただけです。ありがとうございました。より適切な方法で解決されるまで更新を続けます:)

于 2009-09-22T09:41:36.820 に答える