绝对定位span在Firefox中偏移出页面 Edge显示正常的兼容性问题求解

问题原因 #

该兼容性差异来自两个浏览器对溢出内容计算规则、伪元素默认解析逻辑的区别：

1. Chromium内核（Edge）默认不会将transform偏移出容器的元素计入页面滚动高度，而Firefox会将这部分偏移内容算入总高度，导致100vh的容器被撑出额外滚动空间，底部出现空白
2. 你写的.gun-shadow2::after伪元素没有设置content属性，Firefox会生成异常空白节点，进一步放大高度偏差

修复方案 #

按以下步骤修改CSS即可：

1. 给外层.end容器添加overflow: hidden，强制裁剪超出100vh的内容，从根源避免溢出空白

.end {
  background-color: pink;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden; /* 新增 */
}

2. 补全伪元素的必填属性，避免异常空白节点

.gun-shadow2::after {
  content: ''; /* 新增 */
  display: block; /* 新增，明确块级属性 */
  width: 80px;
  height: 285px;
  background: fuchsia;
  border-radius: 50%;
}

3. 可选优化：给.gun容器添加相对定位，统一内部绝对定位元素的参照基准，避免后续定位逻辑混乱

.gun {
  position: relative;
  width: 100%;
  height: 100%;
}

修改后两个浏览器的渲染效果会完全一致，底部空白消失。

内容的提问来源于stack exchange，提问作者Jacob Frye