Safari瀏覽器問題與JavaScript + css

我有一些奇怪的行爲與Safari瀏覽器，即時通訊使用jQuery.GridLayout插件和CSS的樣式。Safari瀏覽器問題與JavaScript + css

只是在某些情況下，這個網站佈局是一個簡單的標題，後面跟着一個由JavaScript定位的塊的集合（每個塊是一個div），並在每次重新調整窗口大小時重新排列。

當我將Safari瀏覽器引導至網站網址時，所有塊在一定程度上重疊（如50％），但當我重新調整窗口大小時，如果它們必須移動，則會自動全部轉到正確的位置，刷新頁面。

因此，看起來加載頁面是在搞亂它，或者是因爲某些東西無法註冊，或者是因爲在我重新調整窗口大小之前什麼都沒有發生。

正如任何人在safari內經歷過這樣的行爲？

它在firefox和opera中完美工作，它是一個有效的html 4.01過渡頁面，並且css也被驗證（明智的是wc3）。

我知道發佈代碼對於排序這類問題是非常寶貴的，但這是一個生產項目，我有責任不這樣做。

無論哪種方式，我很欣賞任何建議是開始尋找？

如何在safari中調試此問題？

謝謝。

來源

2009-09-08 Marvin

慢慢開始刪除所有元素來解決一個接一個，看看你的輸出是否得到修復。一旦它得到修復，你就會知道問題所在。首先刪除最內部的div，然後刪除其父母等等。 – 2009-09-08 09:48:02

一個經典的:)謝謝你，我一直在刪除一些內容，看看它是如何去的我注意到我的邊際在safari中關閉，我傾向於相信我的css可以做一些它不應該的東西，實際上它看起來很多更像意大利麪條而不是實際的代碼。 – Marvin 2009-09-08 10:07:21

如果您無法爲我們發佈頁面的實際代碼，那麼您可能會在嘗試重現問題而無需具體內容時找到解決方案。過去，我在解決一些自己的問題的同時嘗試生成一個顯示在IRC/SO上發佈問題的頁面。如果您能夠在沒有您的內容的情況下重現問題，請將其發佈到社區，並且答案將更容易找到。

我射中最黑暗的猜測導致走向：

你可能會發現你的內容塊的一個原因造成的問題。
您可能會發現您正在使用的不同庫正在導致此問題。
您的佈局的一些JavaScript代碼可能在所有內容都已準備就緒/填充之前運行。從我的內存中，Safari快速在圖像加載之前顯示頁面。
也許你需要指定一些Grid容器的確切寬度/高度。

來源

2009-09-08 09:43:33 gnarf

謝謝，我儘可能做出一個類似的帖子，我現在注意到的一件事是，其中一個塊因爲它將容納「新聞」而不同，具有相似的形狀，但不使用圖像，除了背景/頂部/底部，其構造與其他塊幾乎相似，如果我只使用那個（重複），他們會停止重疊，儘管邊距有點不對，如果重新調整大小，它會得到修復。 – Marvin 2009-09-08 10:28:12

現在所有的內容塊都是相同的，除了「新聞」之外，其中沒有任何內容和內容過多，只有幾個6/7的文本，圖像類似於168x168。我只使用這個庫jQuery.gridLayout。這是非常有趣的，我希望聽到的是，safari在準備好之前加載了一些東西，但由於我在本地測試它有點奇怪，可能java腳本需要更多的時間來執行。我的塊確實有指定的寬度但沒有高度，我可以嘗試指定至少最小高度。 – Marvin 2009-09-08 10:29:25

Upsie，請原諒缺乏格式化:) – Marvin 2009-09-08 10:30:17

Safari在加載鏈接的資源之前觸發DomReady。關於計算在CSS中定義的元素大小的競爭條件通常可以通過在任何JavaScript之前加載CSS資源來避免（例如：確保標籤出現在ANY標籤之前（這是阻塞的，但給CSS一個異步加載）更糟糕的情況是，將塊移到最後一個元素，將上面的標籤留在上面。

也建議使用CSS連接多個文件（如果有的話）。

來源

2009-09-08 15:44:58 dante

小更新：

（在底部新，更新）

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>

我覺得很奇怪，一個刷新腳本解決safari中的問題，但如果我手動刷新頁面頁面浩劫隨之而來......

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

好吧，我終於得到了一些更多的時間來就這個問題和做一些閱讀是一種相當明顯的事情後，工作來到我的腦海裏，讓內容的負載，然後格式它，所以現在我所有的js坐落在</body>和</html>之間。

它不完美，因爲現在您可以在頁面第一次加載時捕捉內容，而無需正確放置內容。

也許生病嘗試幾秒鐘後通過加載第二次調用js。

我知道這個提議有點上線我只是需要時間讓我的手髒感謝所有，生病不斷更新，直到我得到它在一個更合適的方式:)

來源

2009-09-22 09:41:36 Marvin

Safari瀏覽器問題與JavaScript + css

回答

相關問題