如何防止我的网站布局在加载时移动？

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>

的宽度

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

此外，如果您打开开发工具，会降低页面渲染速度并禁用缓存（如果您勾选了该选项）