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

Question

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

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

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

Answer 1

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

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

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

Answer 2

После поиска обходного пути я обнаружил, что используявместоисправлена ​​проблема с половиной контента.

Это предотвратит всю прокрутку и, следовательно, не позволит браузеру прокручивать обрезанное содержимое.

Подобно скрытому, содержимое обрезается до поля заполнения элемента. Разница между клипом и скрытым заключается в том, что ключевое слово клипа также запрещает любую прокрутку, включая программную прокрутку. Поле не является контейнером прокрутки и не запускает новый контекст форматирования. Если вы хотите запустить новый контекст форматирования, вы можете использовать для этого display:flow-root. - Документы MDN

Answer 3

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

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