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

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

我无法重现该问题，但这可能是由网络字体加载和渲染引起的。

这可以解释为什么 <h2>Location</h2>移动 - 因为它的位置依赖于 <h3>Tagline</h3> 的宽度

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

此外，如果您打开了开发工具，这会减慢页面呈现速度并禁用您的缓存(如果您勾选了该选项)