为什么在使用锚链接时此页面布局中断 [英] Why is this page layout breaking when an anchor link is used

问题描述

我的页面 http://dl.dropbox.com/u/49912546/anchor_link_test.htm 当也使用锚点时，显示会有所不同 http://dl.dropbox.com/u/49912546/ anchor_link_test.htm＃vanquish-s -图像下方的内容略微向上移动

My page http://dl.dropbox.com/u/49912546/anchor_link_test.htm displays differently when an anchor is used too http://dl.dropbox.com/u/49912546/anchor_link_test.htm#vanquish-s - content below an image is moved up slightly

这种情况在浏览器中始终存在，因此规范中一定存在表示这是正确的行为...但是呢？它仅在加载图像时发生（如果src无效，则不会发生错误）。

This happens consistently across browsers, so there must be something in the spec that means this is the correct behaviour... but what? It only happens when an image is loaded (if the src is invalid the bug doesn't happen).

* edit
顺便说一句，我发现了一个解决方法已经 http://dl.dropbox.com/u/49912546/anchor_link_test_solved.htm#vanquish- s ，所以我不是要寻找错误修复程序-我只想知道为什么所有浏览器都具有导致这种行为的CSS实现。

*edit By the way, I found a workaround already http://dl.dropbox.com/u/49912546/anchor_link_test_solved.htm#vanquish-s, so I'm not looking for bug fix - I just want to know why all browsers have CSS implementations that cause this behaviour.

推荐答案

一半内容似乎向上移动，因为 .panel
包含在其中设置为 overflow：hidden &

half content appears to shift upwards because the .panel its contained within is set to overflow:hidden & has content that is being clipped as a result.

当浏览器尝试识别命名锚中的元素时，它会看到容器中的多数民众赞成可以裁剪其内容的内容。 ;因此，将该元素滚动到顶部以确保其可见。

When the browser attempts to identify the element in the named anchor it sees thats its within a container that can clip its content & so scrolls that element to the top to ensure its visible.

例如，如果要在 contentInner ，但在命名的 h3 上方，则当命名的锚点用作一半内容滚动，使 h3 在顶部。 （与应用 overflow：scroll 的结果相同；指定的锚使滚动条使其自身与指定元素的顶部对齐）

For example if you were to add any elements within contentInner but above the named h3, then they would not be visible on the page when the named anchor was used as half content is scrolled such that h3 is at the top. (The same result as if overflow:scroll were applied; the named anchor causes the scrollbar to position itself in line with the top of the named element)

这篇关于为什么在使用锚链接时此页面布局中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！