锚链跳过太远
锚链跳过太远
提问于 2011-04-24 17:28:29
在我目前正在工作的一个网站的顶部，我定义了一个带有以下标记的«Skip to content»-Link：
<a href="#content" id="skip-to-content">Skip to content</a>我使用CSS position: absolute将此链接放在视口之外的某个位置。一旦有人聚焦了链接(在页面上跳转时)，链接就会移回视口，并将下面的内容向下推一点，这样它就会获得所需的空间。
#skip-to-content {
display: block;
text-align: center;
position: absolute;
top: -999px;
}
#skip-to-content:focus {
position: static;
outline: 0 none;
border: 1px solid #681;
top: 0;
}如果您现在单击该链接，我的浏览器会正确地跳到该内容，但之后该链接将失去焦点，因此内容会再次滑出一点(因为上面的链接再次移出了视区)。因此，最后，您需要向上滚动一点才能看到内容的开头。看起来，锚链接会跳得太远。
有没有什么方法可以确保链接总是跳到内容而不是下面的一些像素？
请不要建议任何JavaScript解决方案，这是需要在每个浏览器中工作的基本功能。谢谢你的帮助。
--安德烈
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-04-24 17:57:56
虽然这不是一个优雅的解决方案，但尝试将它添加到您的CSS中，它可能会给您一个如何修复它的想法。
#content {
margin-top: -60px;
padding: 60px 1.1em 1.1em;/*add approx 1.1em in px for top padding here*/
}其中60px是跳过链接可见时的近似添加高度。它只是将#content的顶部边缘向上移动了一点。您可以尝试不同的测量方法，将填充恢复到需要的位置。我不想建议使用包装器div或其他任何东西，但这可以为您提供您最初拥有的精确的1.1em顶部填充。
如果当链接可见时，您可以计算出确切的总添加高度，请使用ems而不是px。
Stack Overflow用户
发布于 2011-04-24 22:00:00
你不能在你的:focus规则中将位置重置回static。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5769735
复制相关文章
相似问题
腾讯云开发者
