Google Chrome перемещает div из потока документов при использовании внутренних ссылок

Question

Посмотрите на две ссылки ниже в Chrome:

Рабочая: http://www.datesphere.com/boards/showthread.php?tid=46

Сломано: http://www.datesphere.com/boards/showthread.php?tid=46&pid=345#pid345

Обратите внимание, как разделы навигации и рейтинг нитей корректно отображаются в «рабочей» ссылке, но застряли под панелью пользователя в «битой» ссылке. Я потратил много времени, пытаясь выяснить, почему это происходит (спросили на mybb.com и нескольких других форумах, сообщили об ошибке команде Google Chrome и т. Д.), Но не имели Если повезет, надеюсь, Stackoverflow снова появится.

Вот что я знаю:

• Это происходит только в Google Chrome, и, насколько я могу судить, только в постоянных ссылках, где у вас есть внутренняя ссылка - страницы, заканчивающиеся на "pid = [number] #pid [number]"
• Я полагаю, что это происходит потому, что div "wrapper", который запускает раздел контента, отображается в том же месте, что и панель пользователя, а не под ней, где он принадлежит потоку документов.
• Добавление очищающего div ("style = clear: both;") перед div "content" устраняет проблему в Chrome Developer Tools, но при добавлении его в реальный код ничего не происходит.

Это самая сбивающая с толку и разочаровывающая вещь, которую я встречал в html / css. Кто-нибудь знает, почему это происходит, и как я могу это исправить?

Спасибо

Chris

Answer 1

Вот ваш виновник.

#content {
  overflow: hidden;
}

Именно поэтому вам не следует использовать переполнение, скрытое для очистки поплавков.Привязка ссылок приведет к прокрутке переполненных элементов в определенных ситуациях.Взгляните на clearfix , чтобы очистить поплавки.

Запустите этот javascript в консоли для демонстрации проблемы:

document.getElementById("content").scrollTop = 0