如何才能跳到片段标识符稍高一点的位置？
我不喜欢片段标识符如何跳转到内容从页面开始的实际点。从屏幕顶部开始这个盒子看起来很尴尬。有点烦我。所以我使用了一个锚点，它上面有一个name属性，设置为display: block，这样它就会注意它下面的框顶部的10 of边距。使用这种方法，它实际上跳到了该内容，从内容的开始到浏览器窗口的实际顶部边缘之间有10 to的间距。
<a name="some-text"></a>但是，似乎不再允许我在HTML5中这样做，因为当我试图验证页面时，我得到了一个很好的警告：
name属性已过时。考虑将id属性放在最近的容器上。
我不能仅仅将所有的name属性更改为id属性，因为它变成了一个空的超链接，而不是一个命名的锚(我也尝试过，display: block不再应用于它)。
因此，给出一组部门，像这样：
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>假设它们的顶部都有一个10 it的边距，那么是否有任何方法对它们重新应用it，以便当我使用片段标识符跳转到不同的位置时，它仍然包括浏览器窗口的内容和顶部边缘之间的10 it空间？
注意:我尝试将ID直接应用于每个除法，但浏览器在决定跳转位置时忽略元素的边距。
回答 3
Stack Overflow用户
发布于 2012-11-10 03:14:03
一开始我没把你弄对，让我再试一次。你说：
我不能仅仅将所有的名称属性更改为id属性，因为它变成了一个空的超链接，而不是一个命名的锚(我也尝试过，显示:块不再应用于它)。
我真的不明白这里的问题在哪里，或者为什么您希望它使用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>所以可以归结为以下两种选择：
我没有做对的事情，很抱歉，希望你能纠正我的错误。
你正在想尽办法去完成那些容易实现的事情。
Stack Overflow用户
发布于 2012-11-10 03:34:03
使用填充物可以避免这个问题。由于内容边界中不包括页边距，因此浏览器将忽略它。
<!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>Stack Overflow用户
发布于 2012-11-10 05:02:26
.spacer{height:25px;}在锚后放置一个具有所需高度的类的元素。
小提琴的例子。http://jsfiddle.net/calder12/sJEkQ/3/
https://stackoverflow.com/questions/13318859
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号