如何防止网站布局在加载时发生偏移？

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>的宽度

您可以尝试使用标准系统字体来查看是否可以解决该问题。

另外，如果您打开了开发工具，这将减慢页面渲染速度并禁用缓存（如果选中了该选项）