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

时间:2014-01-02 09:45:48

标签: javascript html css

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

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

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

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

5 个答案:

答案 0 :(得分:3)

回答为什么会发生

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

page without js

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

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

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

其他方式

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

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

答案 1 :(得分:1)

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

.navbar {
     margin-bottom: 50px;
}

目前设定为20px;

答案 2 :(得分:0)

删除此代码: -

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

答案 3 :(得分:0)

这是关于融合边际的问题

删除它:

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

试试这个,它会正常工作:

#college_pages_css .questions {
margin-top: 0;

如果您想要保证金,请将保证金设为div#normal;)

答案 4 :(得分:0)

由于浮动元素,您似乎遇到了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>