Почему этот макет страницы разбивается при использовании привязки

Моя страница http://dl.dropbox.com/u/49912546/anchor_link_test.htm отображается по-разному, когда используется якорь http://dl.dropbox.com/u/49912546/anchor_link_test.htm#vanquish-s - ниже изображение слегка сдвинуто

Это происходит последовательно в браузерах, поэтому в спецификации должно быть что-то, что означает, что это правильное поведение... но что? Это происходит только при загрузке изображения (если src недействителен, ошибка не возникает).

* редактировать Кстати, я нашел обходное решение уже http://dl.dropbox.com/u/49912546/anchor_link_test_solved.htm#vanquish-s, поэтому я не ищу исправления ошибок. Я просто хочу знать, почему во всех браузерах реализованы CSS-реализации, которые вызывают это поведение.

Ответ 1

half content появляется, чтобы сдвинуться вверх, потому что .panel содержащаяся внутри, установлена в overflow:hidden и имеет содержимое, которое в результате обрезается.

Когда браузер пытается идентифицировать элемент в именованном якоре, он видит его внутри контейнера, который может закрепить его содержимое, и поэтому прокручивает этот элемент вверх, чтобы обеспечить его видимость.

Например, если вы должны были добавить какие-либо элементы в contentInner, но выше имени h3, то они не будут видны на странице, когда именованный якорь использовался как half content, прокручивается так, что h3 находится наверху. (Тот же результат, что и при использовании overflow:scroll, именованный якорь заставляет полосу прокрутки позиционировать себя в соответствии с вершиной именованного элемента)

Ответ 2

В моем случае удаление переполнения: скрытая работа

#maincontent {
    width: 100%;
    background: transparent;
    /* overflow: hidden; */
    clear:both;
}