如何修复非ESR版Firefox固定头部锚点链接偏移？及目标媒体查询写法

一、锚点偏移失效的修复方法 #

方案1：使用scroll-margin-top（推荐） #

这是CSS滚动定位的原生解决方案，专门用于设置锚点跳转时的顶部偏移，兼容性覆盖所有现代浏览器（包括非ESR版Firefox），无需依赖伪元素，稳定性远高于原有方法。

直接给锚点目标元素（比如你要跳转的<h2>、<section>等）添加样式：

/* 替换成你的锚点元素选择器，偏移值和固定头部高度一致 */
.anchor-target {
  scroll-margin-top: 215px;
}

方案2：修复原有伪元素方法 #

如果必须保留伪元素实现，可以通过调整属性解决Firefox的渲染偏差：

a.macanchor {
  position: relative; /* 给锚点元素添加相对定位，明确伪元素的定位基准 */
}

a.macanchor::before {
  content: '';
  display: block;
  height: 215px;
  margin-top: -215px;
  visibility: hidden;
  pointer-events: none; /* 防止伪元素拦截锚点的点击事件 */
}

二、针对非ESR版Firefox的媒体查询 #

CSS无法直接检测浏览器是否为ESR版本，可通过Firefox私有文档规则+新特性支持检测来区分非ESR版本（通常是较新的Firefox稳定版，支持更多CSS新特性）：

/* 限定仅Firefox生效 */
@-moz-document url-prefix() {
  /* 检测是否支持仅新版本Firefox（非ESR）支持的特性，例如`view-timeline-inset` */
  @supports (view-timeline-inset: 0) {
    /* 非ESR Firefox专属样式 */
    .anchor-target {
      scroll-margin-top: 215px;
    }
  }
}

如果需要针对ESR版Firefox单独调整，可反过来使用@supports not (...)：

@-moz-document url-prefix() {
  @supports not (view-timeline-inset: 0) {
    /* ESR Firefox专属样式，比如启用原有伪元素方案 */
    a.macanchor::before {
      content: '';
      display: block;
      height: 215px;
      margin-top: -215px;
      visibility: hidden;
    }
  }
}

内容的提问来源于stack exchange，提问作者Edward Konczal