我正在努力清理我的锚的工作方式。我有一个固定在页面顶部的标题，所以当你链接到页面其他地方的锚时，页面跳转，锚位于页面顶部，留下固定标题后面的内容(我希望这是有意义的)。我需要一种方法来抵消锚的25px从头部的高度。我更喜欢HTML或CSS，但Javascript也可以接受。
当前回答
我的解决方案结合了CMS的目标和前选择器。其他技术不考虑锚中的文本。调整高度和负边距到你需要的偏移量…
:target::before {
content: '';
display: block;
height: 180px;
margin-top: -180px;
}
其他回答
对于同样的问题，我使用了一个简单的解决方案:在每个锚上放置40px的填充顶部。
改变位置属性的解决方案并不总是可能的(它会破坏布局)，因此我建议这样做:
HTML:
<a id="top">Anchor</a>
CSS:
#top {
margin-top: -250px;
padding-top: 250px;
}
用这个:
<a id="top"> </a>
为了减少重叠，设置font-size为1px。空锚将无法在某些浏览器中工作。
我在一个TYPO3网站上遇到了这个问题，其中所有的“内容元素”都用类似这样的东西包装:
<div id="c1234" class="contentElement">...</div>
我改变了渲染，所以它是这样渲染的:
<div id="c1234" class="anchor"></div>
<div class="contentElement">...</div>
这个CSS:
.anchor{
position: relative;
top: -50px;
}
固定的topbar是40px高，现在锚再次工作，并在topbar下10px开始。
这种技术的唯一缺点是你不能再使用:target。
对于现代浏览器，只需将CSS3:target选择器添加到页面。这将自动应用于所有的锚。
:target {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}
用可链接id来提供导航栏高度的隐藏span标签怎么样?
#head1 {
padding-top: 60px;
height: 0px;
visibility: hidden;
}
<span class="head1">somecontent</span>
<h5 id="headline1">This Headline is not obscured</h5>
这里是小提琴:http://jsfiddle.net/N6f2f/7
