Question

我不喜欢片段标识符如何跳转到页面上内容开始的实际位置。如果框开始在屏幕顶部，看起来很尴尬。这有点让我烦恼。所以我使用了一个名称属性高于它的锚点，设置为display: block，这样它就会注意它下方框顶部的10px边距。使用这种方法，它基本上跳到了内容，在内容的开头和浏览器窗口的实际上边缘之间有10px的间距。

<a name="some-text"></a>

但似乎我不再允许在HTML5中执行此操作，因为当我尝试验证页面时，我收到了这个警告：

name属性已过时。考虑将id属性放在最近的容器上。

我不能只将所有name属性更改为id属性，因为它变为空链接而不是命名锚（我也尝试过，display: block不再得到应用）。

所以，考虑到一组分歧，如此：

<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>

并假设它们都有一个10px的边距应用于它们的顶部，有没有办法重新应用ID，以便当我使用片段标识符跳转到不同的位置时，它仍然包含10px空间内容和浏览器窗口的上边缘之间？

注意：我已尝试将ID直接应用于每个部门，但浏览器在确定跳转位置时会忽略该元素的边距。

Answer 1

起初我没有让你正确，让我再试一次。你说：

我不能只将所有名称属性更改为id属性，因为它变为空的超链接而不是命名锚（我也尝试过，显示：块不再应用于它）。

我真的不明白这里的问题在哪里，或者您为什么要使用display: block。我和W3C的目的显然是placeholder，它应该像HTML4一样充当锚点，只使用id而不是name属性。

如果你通过W3C的标记验证器运行这个简单的html，你会发现它是有效的html5。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <a id="test"></a>
</body>
</html>

所以归结为这两个选项：

一个。我没有得到正确的答案，我很抱歉，希望你能纠正我的错误。

湾你正在不遗余力地完成可以轻松实现的事情。

Answer 2

使用填充可以避免此问题。由于保证金不包含在内容边界中，因此浏览器会忽略它。

<!doctype html>
<html>

<head>
<style type="text/css">
body {
  margin: 0;
  padding: 0;
}
div {
  padding-top: 10px;
}

</style>
</head>
<body>

<div id="1">How can I jump to a point slightly above the fragment identifier?<br/>
up vote 2 down vote favorite</div>

<div id="2">
I don't like how the fragment identifier jumps to the actual point of where the content begins on the page. It looks awkward having the box start right at the top of the screen. It kind of bugs me. So I was using an anchor with a name attribute above it, set to display: block so that it would pay attention to the 10px margin on the top of the box below it. Using this method, it essentially jumped down to that content, with 10px spacing between the start of the content and the actual top edge of the browser window.</div>

<div id="3">
But it seems that I'm no longer allowed to do this in HTML5, as when I try to validate the page, I get this nice warning:</div>

<div id="4">
    The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.</div>

<div id="5">
I can't just change all the name attributes to id attributes because it becomes an empty hyperlink rather than a named anchor (I've also tried, the display: block no longer gets applied to it).</div>

<div id="6">
So, given a group of divisions, like so:</div>

<div id="7">Content</div>
<div id="8">Content</div>
<div id="9">Content</div>
<div id="10">Content</div>

<div id="11">
and assuming that they all have a 10px margin applied to the top of them, is there any way to re-apply the IDs to them so that when I use fragment identifiers to jump to different spots, it still includes the 10px space between the content and the top edge of the browser window?</div>

<div id="12">
Note: I've tried applying the ID directly to each division, but the browser ignores the margin on the element when determining where to jump.</div>

<div id="13">
html fragment-identifier</div>

</body>

</html>

Answer 3

.spacer{height:25px;}

在锚之后放置一个具有您想要的高度的类的元素。

小提琴的例子。 http://jsfiddle.net/calder12/sJEkQ/3/

如何跳转到片段标识符上方的某个点？

3 个答案: