Tại sao trang này bố trí phá vỡ khi một liên kết anchor được sử dụng

Question

My trang http://dl.dropbox.com/u/49912546/anchor_link_test.htm hiển thị khác nhau khi một neo được sử dụng quá http://dl.dropbox.com/u/49912546/anchor_link_test.htm#vanquish-s - nội dung bên dưới một hình ảnh được chuyển tăng nhẹ

Điều này xảy ra liên tục trên các trình duyệt, vì vậy phải có một cái gì đó trong spec có nghĩa là đây là hành vi đúng ... nhưng cái gì? Nó chỉ xảy ra khi một hình ảnh được tải (nếu src không hợp lệ thì lỗi đó không xảy ra).

* chỉnh sửa Nhân tiện, tôi đã tìm được cách giải quyết lỗi http://dl.dropbox.com/u/49912546/anchor_link_test_solved.htm#vanquish-s, vì vậy tôi không tìm cách sửa lỗi - tôi chỉ muốn biết tại sao tất cả các trình duyệt đều có triển khai CSS gây ra hành vi này.

Answer 1

half content dường như chuyển lên vì .panel nó chứa bên trong được thiết lập để overflow:hidden & có nội dung đã được cắt bớt như một kết quả.

Khi trình duyệt cố gắng xác định phần tử trong neo được đặt tên, nó sẽ thấy nó trong vùng chứa có thể cắt nội dung của nó & để cuộn phần tử đó lên trên cùng để đảm bảo phần tử hiển thị.

Ví dụ nếu bạn đã thêm bất kỳ yếu tố trong contentInner nhưng phía trên tên h3, sau đó họ sẽ không được hiển thị trên trang khi anchor được đặt tên được sử dụng như half content là cuộn mà h3 là ở đầu trang. (Các kết quả tương tự như nếu overflow:scroll đã được áp dụng; anchor được đặt tên làm cho thanh cuộn đến vị trí riêng của mình phù hợp với đầu của phần tử được đặt tên)

Answer 2

Trong trường hợp của tôi loại bỏ overflow: hidden làm việc

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