如何防止網站布局在加載時發生偏移？

Question

問題：

當我加載我設計的網站時，頁面加載時，布局會短暫出現，然后卡入正確的位置。 至少在Safari和Chrome中會發生此行為。

頁面加載時如何將所有內容保存在正確的最終位置？

碼：

鍵盤上有問題的HTML（出於隱私原因更改了詳細信息）： http : //codepad.org/GSGHYF0N

樣式表： http ： //codepad.org/Yr4ULwi0

附加信息：

• 最明顯的地方是<h2>Location</h2> 。
• 圖片的大小均在HTML和CSS中指定。
• 由於滾動條出現，因此整個布局不會移動為一個，這不是問題。

資源資源

有關Google Developers的信息非常有用，但是並未指出如何解決我的特定問題。 但是，由於防止了垃圾郵件，StackOverflow不允許我發布這些鏈接。

http://jsfiddle.net/QHeG8/

Answer 1

我無法復制該問題，但這可能是由webfonts加載和渲染引起的。

那可以解釋為什么<h2>Location</h2>移動-因為它的位置取決於<h3>Tagline</h3>的寬度

您可以嘗試使用標准系統字體來查看是否可以解決該問題。

另外，如果您打開了開發工具，這將減慢頁面渲染速度並禁用緩存（如果選中了該選項）