问题:
当我加载我设计的网站时,页面加载时布局会出现短暂的不稳定,然后卡入正确的位置。此行为至少在 Safari 和 Chrome 中出现。
如何在页面加载时将所有内容保存在正确的最终位置?
代码:
键盘上有问题的 HTML(出于隐私原因更改了详细信息):http://codepad.org/GSGHYF0N
样式表:http://codepad.org/Yr4ULwi0
附加信息:
- 最明显的不合时宜的是
<h2>Location</h2>
. - 图片的大小均在 HTML 和 CSS 中指定。
- 这不是整个布局因为出现滚动条而整体移动的问题。
资源
Google Developers 上的信息很有用,但没有说明如何解决我的特定问题。但是,由于垃圾邮件预防,StackOverflow 不允许我发布这些链接。
最佳答案
我无法重现该问题,但这可能是由网络字体加载和渲染引起的。
这可以解释为什么 <h2>Location</h2>
移动 - 因为它的位置依赖于 <h3>Tagline</h3>
的宽度
您可以尝试使用标准系统字体,看看是否可以解决问题。
此外,如果您打开了开发工具,这会减慢页面呈现速度并禁用您的缓存(如果您勾选了该选项)
关于html - 如何防止我的网站布局在加载时移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10747770/