1

我不喜欢片段标识符如何跳转到页面上内容开始的实际点。让框从屏幕顶部开始看起来很尴尬。这有点让我烦恼。所以我使用了一个在其上方带有名称属性的锚点，设置为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 直接应用于每个分区，但浏览器在确定跳转位置时会忽略元素上的边距。

4

3 回答 3

1

一开始我没看懂你，让我再试一次。你说：

我不能只是将所有 name 属性更改为 id 属性，因为它变成了一个空的超链接而不是一个命名的锚（我也尝试过， display: 块不再应用于它）。

我真的不明白这里的问题出在哪里，或者你为什么要使用它display: block。它的目的是我和 W3C 显然认为它是一个占位符，它应该像在 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>

所以归结为这两个选项：

一个。我没有做对，很抱歉，希望你能纠正我的错误。

湾。您正在竭尽全力完成可以轻松实现的事情。

于 2012-11-10T03:14:03.810 回答
1

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

<!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>
于 2012-11-10T03:34:03.900 回答
0 
.spacer{height:25px;}​

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

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

于 2012-11-10T05:02:26.943 回答