使用锚链接时，为什么此页面布局会中断

Question

我的页面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实现导致这种行为。

Answer 1

half content似乎向上移动，因为.panel 其中包含的内容设置为overflow:hidden＆amp;具有被剪裁的内容。

当浏览器尝试识别命名锚点中的元素时，它会看到它在一个可以剪切其内容和容器的容器中。所以将该元素滚动到顶部以确保其可见。

例如，如果您要在contentInner中但在命名h3上方添加任何元素，那么当使用命名锚点half content时，它们将不会在页面上显示滚动使h3位于顶部。 （与应用overflow:scroll的结果相同;命名锚点使滚动条将自身定位在与命名元素顶部对齐的位置）

Answer 2

在我的情况下删除溢出：隐藏工作

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