锚点链接跳转太远

Question

我正在处理的一个网站顶部，我定义了一个带有以下标记的“跳转至内容”链接：

<a href="#content" id="skip-to-content">Skip to content</a>

我把这个链接放在视口之外，使用CSS的position: absolute属性。当有人聚焦于该链接（通过页面上的“tab”键），链接将被移动回视口，并将内容下方向下推一点，以便获得所需空间。

#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解决方案，这是基本功能，需要在每个浏览器中正常工作。感谢您的帮助。

—André

- anroesti

---

你能贴一下网站链接吗？ - Flash

http://www.albertroesti.ch/ （页面加载后，按一次TAB键） - anroesti

你使用哪个浏览器出现问题了吗？在我的火狐浏览器中看起来没问题。 - Flash

我正在Ubuntu上使用Firefox 3.6.16版本。这可能是一个特定于浏览器的错误吗？ - anroesti

忽略那个注释，我看到问题了（只是没有足够的内容向下移动足够远）。 - Flash

Answer 1

虽然不是一种优雅的解决方案，但尝试将此代码添加到您的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顶部填充。

如果您能确定链接可见时确切的总增加高度，请使用 em 而不是px进行测量。

- Wesley Murch

---

这种解决方案的缺点是，不使用跳转链接的访问者仍然会看到顶部间距。但我还是打算选择这个方案。 - anroesti

他们不应该看到它。填充偏移了负边距，只有在存在背景或边框的情况下才会看到差异，而在您的情况下我没有看到。您需要微调此解决方法，这只是为了给您提供一种实现解决方案的思路。 - Wesley Murch

Answer 2

在你的:focus规则中，你可以不将位置重置为static。

- Boris Zbarsky

---

无论如何，感谢您的回复。但是我不希望跳转链接显示在其他元素的顶部。 - anroesti

是的，这样做就失去了意义。 - Wesley Murch