html - 带边框的 HTML 元素的偏移 anchor 以针对固定标题进行调整

Question

我的问题与 this 高度相关之前回答的问题。事实上，@harpo 在最高投票答案的评论中提供的解决方案对我来说是部分解决方案。但是，我发现它实际上不适用于我的某些元素，特别是具有 border 的元素。

一些上下文:我在我的页面上使用 Bootstrap，我在顶部有一个固定的导航栏，然后是一个包含大量未设置样式的 divs 和 .panel 的页面这些div里面的div。我的 body 上有一个 60px 的顶部填充，它将所有内容向下推以解释导航栏。但是，当我单击带有偏移量的链接时(例如 example.com#div2-1)，div 的顶部仍被导航栏覆盖。

使用上面链接答案中提供的解决方案，我在 :before 元素上放置了 60px 的负填充(将元素向上拉 60px)，然后通过设置高度为 60px。这不会产生视觉差异(有意)，但我的 div 的计算高度现在高了 60px，div 比它应该的早 60px 开始，而真正的内容晚 60px 开始。这实质上再次抵消了导航栏的内容。

但是，我发现在有边框的元素上，例如我的 .panel 元素，边框似乎包含所有内容，而 :before 伪-元素我不再对我的 div 的计算高度产生影响，这意味着它再次被导航栏覆盖。

这是我在 JSFiddle 上的代码:http://jsfiddle.net/rszqtw80/3/

如果您查看任何开发工具中的渲染结果，您可以清楚地看到 :before 元素已正确创建并且外部和内部的高度都正确 (60px) div。但是对于内部 div，元素的整体计算高度最终不包括 :before 元素。使用 Chrome Dev Tools 禁用 border 使它对我有用，所以我推断出问题是边框。

所以我的问题是:是否有可能让这个基于 CSS 的偏移量与我的 .panel 元素一起工作，而不会丢失 border 或不得不返回插入 a 标签无处不在？因为老实说，如果没有 border，.panel 看起来很难看，并且将每个 div 嵌套在 a 中> 标签也很丑。

提前致谢!

编辑: 稍微重写了我的问题，希望能消除对我意图的任何误解。抱歉我的困惑解释:(

进一步编辑:我已经添加了 3 个屏幕截图，希望能够比任何文字都能更好地展示这一点。我会在这里添加它，但由于缺乏“声誉”，我不能添加两个以上的链接。

Answer 1

你真的不需要 :before 标签。

jsfiddle.net/rszqtw80/8/

为了您的解释:> 选择器选择您元素的所有直接子元素。

.first-element > .all-direct-children

<a class="first-element">
    <div class="all-direct-children">
        <div id="notthisone" class="all-direct-children">
        </div>
    </div>
</a>

#notthisone 元素不会受到您的更改的影响。 使用 nth-child，您可以选择任何您想要的 child 。在你的情况下，我用它来给 Div 1、Div 2 等之后的第一个 anchor 。 margin-top 为 0，这样它就不会与你的标题(Div 1、Div 2)等分开。