Почему мой элемент перемещается, когда страница загружается и когда выполняется javascript?

Question

Рассмотрите эту страницу: http://www.collegeanswerz.com/adelphi-university/academics/professors/do-professors-explain-things-clearly-are-professors-interesting.

Элемент, о котором идет речь, «они делают вещи легкими для понимания? Они интересны?» в светло-серой коробке в правом верхнем углу. Когда страница загружается, она начинается высоко, а затем она перемещается на 30 пикселей вниз. То же самое происходит, когда вы нажимаете «Информация» на панели навигации.

Это элемент: <div id="question_sub" class="well"></div>.

Почему это происходит, и как я могу это исправить?

Answer 1

Если вы хотите сохранить 50px разница между элементами затем изменить класс navbar также быть 50px

.navbar { 
    margin-bottom: 50px; 
} 

В настоящее время он установлен в 20 пикселей;

Answer 2

Удалить этот код: -

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

Answer 3

Это проблема о слитого рентабельностью

Удалить это:

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

И попробовать это, он будет работать нормально:

#college_pages_css .questions { 
margin-top: 0; 

Если вы хотите, чтобы argin, поместите маржу на div # normal;)

Answer 4

Похоже, что у вас проблема с CSS из-за плавающих элементов.

попробовать плавающая СЧА слева:

#normal > nav { 
     float: left; 
    } 

    .disqus { float: right } 

и обертывают следующие элементы в DIV, который плавал вправо, для Exemple:

<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> 

Answer 5

Ответ Почему это происходит

Если попытаться загрузить страницу без Javascript страница выглядит

Проблема Ваша страница очень сильно зависит от JS для dom элементов и для стилизации. Решение Чтобы избежать этого стиля вашей страницы в css максимально, JS следует использовать для взаимодействия или создания привлекательной веб-страницы.

Возможная проблема Если вы загружаете много внешнего скрипт, не относящиеся к содержанию страницы, как дискусы внутри элемента головки Решения Переместить все внешние JS от головы до конца тела, если вы не делаете это, или вы можете загрузить их асинхронно.См Mozilla Synch and Async

Другой способ Если вы хотите контент, который будет загружен с сервера только тогда, когда какая-то часть этого изменилась затем использовать метод кэширования приложений с этой страницы будут загружаться с клиентской машины, так только начальной загрузки страницы будет принимать время для первой загрузки, а затем она будет довольно быстро Проверить Using Application Cache

Другие способы

• Сжать Javascript d CSS
• сжатия Использование GZIP

Есть много больше материала, искать его вы найдете океан знаний, reference