Firefox中绝对定位元素顶部被截断问题求助

问题分析 #

你遇到的Firefox中绝对定位大字号元素顶部截断问题，本质是不同浏览器的字体渲染引擎、行高计算逻辑差异导致的。Chrome/Edge基于Blink引擎，Firefox基于Gecko，两者在处理大粗体文本的基线、行高对齐时存在细微差别，最终表现为元素顶部被裁剪。

通用解决方案（替代浏览器专属Hack） #

1. 统一定位上下文与对齐规则 #

确保父容器设置position: relative，让绝对定位元素以父容器为基准；同时给绝对定位文本添加vertical-align: top，强制顶部对齐，消除浏览器默认基线对齐的差异：

.features-title-box {
  position: relative; /* 明确绝对定位的基准容器 */
}

.background-text {
  position: absolute;
  /* 保留原有其他样式 */
  top: 0;
  vertical-align: top; /* 强制顶部对齐 */
  margin: 0; /* 清除默认外边距 */
  padding: 0; /* 清除默认内边距 */
}

2. 使用相对行高替代固定值 #

固定数值的line-height（比如12rem）在大字号下，不同浏览器的渲染适配性差。改用相对值让行高与字体大小成比例，避免裁剪：

.background-text {
  /* 替换原有line-height */
  line-height: 1; /* 行高等于字体大小，适配跨浏览器 */
  /* 若需要微调，可使用1.1、1.2等相对倍数 */
}

3. 优雅的Firefox专属微调（若仍需） #

如果通用方案无法完全匹配效果，用CSS特性查询替代Angular的JS判断，比添加类更简洁：

@supports (-moz-appearance:none) {
  .background-text {
    line-height: 1.2;
    /* 仅在Firefox中生效的微调样式 */
  }
}

修改后完整示例代码 #

<div class="features-title-box">
    <p class="background-text background-text-light">AGENCIES</p>
    <h2 class="features-title features-title-light">Fast-Track Your Hiring Process</h2>
</div>

.features-title-box {
  position: relative;
}

.background-text {
  position: absolute;
  font-size: 15rem;
  font-weight: 900;
  width: 100%;
  color: rgba($secondary100, 0.3);
  white-space: nowrap;
  z-index: 0;
  text-transform: uppercase;
  line-height: 1;
  top: 0;
  vertical-align: top;
  margin: 0;
  padding: 0;

  &-light {
    color: rgba($secondary50, 0.2);
  }
}

/* Firefox专属微调（可选） */
@supports (-moz-appearance:none) {
  .background-text {
    line-height: 1.2;
  }
}

.features-title {
  font-size: 2.8rem;
  color: $textDark;
  z-index: 20;
  width: 100%;
  text-shadow: rgba(0, 0, 0, 0.24) 0px 0.3rem 0.8rem;
  position: relative;

  &-light {
    color: $textLight;
  }
}

内容的提问来源于stack exchange，提问作者Jo Momma