Firefox绝对定位异常：React+SCSS组件跨浏览器适配求助

问题描述 #

我用React + SCSS开发的组件在Chrome中显示正常，但在Firefox打开时，元素会偏移到左上角，显示异常。尝试给.main-country-top-layer添加固定宽高后组件能正常显示，但我需要响应式布局，不想用硬编码的尺寸值。

核心原因 #

1. 相对定位容器.main-country-post-container没有明确高度约束，Firefox下内部绝对定位元素无法正确继承容器尺寸
2. .main-country-post-bg-image-container的伪元素定位基准错误，导致遮罩层位置异常
3. 大屏媒体查询中，背景容器的height:100%没有对应父级高度基准，Firefox无法正确计算

修复步骤 #

1. 给相对定位容器添加明确尺寸约束 #

给外层容器设置基础高度，同时适配大屏的自适应需求：

.main-country-post-container {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 256px; /* 和背景容器初始高度保持一致 */
}

@media screen and (min-width: 768px) {
  .main-country-post-container {
    height: auto;
    min-height: 320px; /* 防止容器塌陷，可根据需求调整 */
  }
}

如果想要更灵活的响应式比例，也可以用aspect-ratio替代固定高度：

.main-country-post-container {
  position: relative;
  cursor: pointer;
  width: 100%;
  aspect-ratio: 4/3; /* 自定义宽高比，适配不同屏幕 */
}

2. 修正背景容器的伪元素定位基准 #

给.main-country-post-bg-image-container添加相对定位，让内部伪元素以它为基准定位，同时修正无效的颜色值：

.main-country-post-bg-image-container {
  width: 100%;
  height: 256px;
  filter: blur(4px);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  position: relative; /* 新增：让伪元素以此容器为定位基准 */

  img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: 12px;
  }

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85); /* 修正：颜色值范围是0-255，原256无效 */
    border-radius: 12px;
  }
}

3. 确保绝对定位层的尺寸继承 #

.main-country-top-layer已经设置了top/right/bottom/left:0，只要父容器有明确尺寸，它会自动铺满。大屏下调整背景容器高度时，确保父容器有高度来源：

@media screen and (min-width: 768px) {
  .main-country-post-container .main-country-post-bg-image-container {
    height: 100%; /* 此时父容器高度由min-height或内容撑起 */
  }
}

验证效果 #

修改后，Firefox中绝对定位的元素会正确跟随相对定位容器的尺寸，不再偏移，同时保持响应式布局，无需硬编码宽高。

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