为什么我的元素在页面加载和javascript执行时移动？

Question

请考虑以下页面：http://www.collegeanswerz.com/adelphi-university/academics/professors/do-professors-explain-things-clearly-are-professors-interesting。

有问题的元素是“他们让事情易于理解吗？他们有趣吗？”在右上方的浅灰色框中。当页面加载时，它从高处开始，然后向下移动30px。单击导航栏中的“信息”时会发生同样的事情。

这是元素：<div id="question_sub" class="well"></div>。

为什么会发生这种情况，我该如何解决？

Answer 1

回答为什么会发生

如果您尝试在没有javascript的情况下加载页面，则页面会显示为

<强>问题 您的页面非常依赖于js来修改dom元素和样式。 解决方案为了避免这种风格使css中的页面尽可能地最大化，JS应该用于交互或使网页具有吸引力。

可能的问题 如果你要加载许多与页面内容无关的外部脚本，比如在head元素内的铁饼 的解决方案 如果您不这样做，则将所有外部js从头部移动到另一端，或者您可以异步加载它们。请参阅Mozilla Synch and Async

另一种方式 如果你想只在内容的某些部分发生变化时才从服务器加载内容，那么使用应用程序缓存技术将从客户端机器加载页面，因此只有初始页面加载需要时间用于第一次加载，然后它将是相当的快速 查看Using Application Cache

其他方式

• 压缩Javascript和CSS
• 使用gzip压缩

还有很多东西，搜索它你会发现知识的海洋，reference

Answer 2

如果你想在元素之间保持50px的边距，那么将navbar类更改为50px

.navbar {
     margin-bottom: 50px;
}

目前设定为20px;

Answer 3

删除此代码： -

<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Answer 4

这是关于融合边际的问题

删除它：

#college_pages_css .questions {
margin-top: 30px;

试试这个，它会正常工作：

#college_pages_css .questions {
margin-top: 0;

如果您想要保证金，请将保证金设为div＃normal;）

Answer 5

由于浮动元素，您似乎遇到了CSS问题。

尝试浮动左侧的导航栏：

    #normal > nav {
        float: left;
    }

    .disqus { float: right }

并将以下元素包装在一个浮动到右侧的div中，例如：

    <div class="disqus">
        <div id="question_sub" class="well">Do they make things easy to understand? Are they interesting?</div>
        <p class="stratify" style="display: block;">tip: talk about the best/worst/average cases</p>
        <div id="disqus_thread">
    </div>